用DIV+CSS切割多背景合并图片 CSS Sprites 技术

CSS Sprites 技术是一种优化网站性能的方法，它可以将多张小图片合并成一张大图片，并通过 CSS 的 background-position 属性来控制图片的显示位置，从而减少 HTTP 请求次数，提高网页加载速度。

具体实现方法如下：

1. 将多张小图片合并成一张大图片。

2. 在 HTML 中使用 <div> 元素来显示背景图片，设置背景图片的位置和大小。

3. 利用 CSS 的 background-position 属性来控制背景图片的显示位置。

示例代码如下：

HTML:

<div class="sprite sprite-icon1"></div>
<div class="sprite sprite-icon2"></div>
<div class="sprite sprite-icon3"></div>

CSS:

.sprite {
    display: inline-block;
    background: url(sprite.png) no-repeat;
}

.sprite-icon1 {
    width: 50px;
    height: 50px;
    background-position: 0 0;
}

.sprite-icon2 {
    width: 60px;
    height: 60px;
    background-position: -50px 0;
}

.sprite-icon3 {
    width: 70px;
    height: 70px;
    background-position: -110px 0;
}

其中，sprite.png 是合并后的大图片，每个小图片在大图片中的位置由 CSS 中的 background-position 属性指定。使用这种方法可以有效减少 HTTP 请求次数，提高网页加载速度。