html为什么用雪碧图的优缺点

CSS Sprite(雪碧图/精灵图)

1          概念解释

将小图标和背景图像合并到一张图片上，然后利用css的背景/定位来显示需要显示的图片部分。

2           优点

① 减少加载网页图片时对服务器的请求次数

因为我们在使用雪碧图之后，本来需要多次请求的图片，我们可以一次请求过来，然后使用background-position

减少了该页面向服务器请求的次数，间接地优化了该页面的性能

②  图片体积较少，提高页面的加载速度

③  兼容性好, IE >= 8  IE=7(png8)

④ 减少鼠标滑过的一些bug

3           缺点

①  制作雪碧图比较麻烦

② 样式的书写，定位比较麻烦

4           原理

a)   将所有图标集合至一张透明图片上

b)   background设置为背景图

c)   background-position定位每一个图标的位置

1-5           示例

/* 调用雪碧图 */

.icons{
background: url(img/icons.png),no-repeat;
display: inline-block;
font-style: normal;
}

/* 修改位置 */

.icon_1 {
background-position: 0px -152px;
}

.icon_2 {
background-position: 0px -180px;
}