手把手，永哥教你学会css sprite（雪碧图）技术

江山如画 • 2018年2月20日下午12:14 • 网页制作 • 阅读 11723

css sprite又称雪碧图或css精灵。

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

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更加友好。

css sprite优点：

有效减少网站的http请求数量，加速图片的显示。
合并多张小图片成大图，能减少字节总数（大图大小<=多张小图大小）.

什么时候使用css sprite？

网站使用很多小图片，且容量比较小的（2~3k）。
图片加载量比较大，且为静态图片。

注意：大图片不建议用雪碧图咯，太大的图片不利于合并，且定位麻烦，一次的加载时间长，导致全部图片出现时间延迟，效果不友好，得不偿失！

css sprite原理：

将许多的小图片整合到一张大图片中，利用css中的background-image属性，background-position属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。

简单来说，就是利用background-position属性属性，设置背景图需要显示的起始位置，再通过标签来控制背景图显示的范围。

先来了解一下background-position属性吧，

如上图，background-position的取值就是背景图显示的起始坐标

以左上角为（0,0）坐标

形式是background-position：0, 0; 0px 0px 也可以写成left top。

上图中背景图部分在容器左上，定点坐标为负值

css sprite拼图：将许多的小图片整合到一张大图片中

可以用ps，或者网上很多在线雪碧图生成工具 http://alloyteam.github.io/gopng/ ，可以利用这些去生成雪碧图。

其实最好的拼图就是每个图标边距是多少和图标周围的留白留多少都控制好，这样background-position的坐标写起来才有规律。

css sprite（雪碧图）实例一

html代码：

<ul class="container">
        <li class="icon icon-issue"></li>
        <li class="icon icon-upload"></li>
        <li class="icon icon-passage"></li>
</ul>

CSS代码：

.container {
    overflow: hidden;
    width: 50px;
    height: 200px;
    background-color: #faa755;
}

.icon {
    margin: 0 auto;
    margin-top: 20px;
    width: 40px;
    height: 30px;
    background-image: url(icon.png);
    list-style-type: none;
}

.icon-issue {
    background-position: 0 0;
}

.icon-upload {
    background-position: 0 -50px;
}

.icon-passage {
    background-position: 0 -100px;
}

效果图：