CSS sprite 雪碧图，竟如此好用！

先说用处:

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像(一般来说是透明)合并到一张图片上，然后利用css的背景定位(position)来显示需要显示的图标部分。

 

为什么这样用？

制作一张网页时，会使用很多个图标。

正常思路：有多少个图标我们就请求多少次，或使用替换标签<img>等，或使用属性background-image

CSS雪碧图(Sprite)：  将所有图标放在一个透明背景的图片下，通过position来控制要展示的图标。

 

优势:

• 减少加载图片时对服务器的请求次数
• 提高页面加载速度
• 减少鼠标滑过的bug (题主暂为遇到这种bug，故此不多解释)

缺点：

• 因所有图标都放在同一张图片中，所以在页面缩放时，浏览器会做一些额外的工作来纠正行为——为了避免雪碧图中相邻图片“串门”。影响页面性能
• 因要考虑整张图片中每张小图标的“个人行为”，所以在拼图的时需要考虑他们是否会产生耦合关系。譬如修改其中一张图标，可能就需修改整张图片。
• 若雪碧图足够复杂则会让CSS３的难修改和维护变得灰常复杂！（如果这张图足够大，维护光想想就可让人不寒而栗）
• 会某种层度降低ａｌｔ的潜在益处（对于某些重要图片）

 

总结：

CSS　雪碧图很方便，但要用的活！

不要为了过分追求减少请求数就贪杯哦～

操作雪碧图网页工具：http://www.spritecow.com/

引用：

ＣＳＳ雪碧－百度百科

教你来使用雪碧图（ＣＳＳ　ｓｐｒｉｔｅ）

雪碧图＆＆合成工具