css精灵是什么？

html-css036

css精灵是什么？,第1张

css精灵，即CSS Sprite，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

哈哈。这问题直接Q问我就是了。亮子。这个是css sprite 也就叫css精灵 、css 雪碧。

其实就是，预先把网站上用到的小图片 合到一张图片上，体积反而会变小，且可以减轻服务器负担，使页面加载速度更快。

具体实现方法

利用css的背景图片定位，在某个有着固定宽高的容器只显示这张图片的一部分。

代码：background: url(图片地址) no-repeat 10px 20px

这是随便写的，url是图片地址，no-repeat意思是不重复，10px 20px代表着横向和纵向坐标。

以容器的左上角为原点，图片向右或向下移动，数值就是正，向左或向上就是负。

参考资料： http://baike.baidu.com/view/2173476.htm

这种做法叫做css精灵，CSS Sprites，或者集合图片法。

原理：

原理就是把所有图片（前提是图片较小）都集合在一张图中，然后利用css样式中的background-position属性来准确定位到位置。

优点：

可以减少http请求，提高性能，本来四张图片要请求四次，现在一次搞定。

缺点：

就是处理起来比较麻烦，需要改动其中一个就要改整个图。

需要用ps先定位好每个图片的位置。

对html容器也有较高的要求，宽高都对背景会有依赖。

所以建议在比较稳定的页面，不需要经常改动的地方用css精灵的方法，如果需求经常变动，我觉得直接用单图也可以。