CSS Sprites:图片整合技术详细案例

江山如画 • 2019年11月5日下午8:18 • 网页制作 • 阅读 1793

CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。介绍了CSS Sprites技术的实现方法，优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。

CSS Sprites的原理：将小图片整合到一张大的图片上，根据具体图标在大图上的位置，给背景定位。

css中用一张背景图做页面的技术有什么优势？

如上图如果一个页面需要用到9张图片，那么对服务器的请求次数就是9次，而使用CSS Sprites:图片整合技术就可以把9张图片放到一张图片上，然后利用“background-image”，“background- repeat”，“background-position”的组合进行背景定位实现同样的效果，这样只对服务器请求一次，图片总大小也由原来的36K缩小到4K。

CSS Sprites:图片整合技术的优点

能够提升网站性能。普通制作方式下的大量图片，现在合并成一个图片，大大减少了对服务器的请求次数，对网站的加载性能有重要影响。

CSS Sprites:图片整合技术缺点

可维护性差，每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置，由于图片的位置需要固定为某个绝对数值，也是一件颇为不爽的事情。这就失去了诸如center之类的灵活性。
也有可能会出现干扰图片的情况。

CSS Sprites:图片适用场合

在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。

CSS Sprites是值得推广的一种技术。尤其适宜用于固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。

CSS Sprites:图片整合技术实例：导航栏的制作

传统制作方法要用到三张图片：

然后设置超链接a的背景图片为第一张，a:hover的background:url(第三张图片地址) 0 0 no-repeat;
a#current 的背景图片 background:url(第二张图片地址) 0 0 no-repeat;

而使用CSS Sprites技术把网页中用到的三张图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。

上面代码：

css background属性:url（）里是背景图片路径；两个数值参数，第一个参数表示距左多少px，第二个参数表示距上多少，no-repeat表示背景图片向哪个方向重复，此时为不重复。定位图片位置的参数是以图片的左上角为原点的，理解了这些，CSS Sprites技术就基本上懂了，是靠背景图片定位来实现的。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/4149.html