CSS Sprite是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去,这样,在访问页面时,就只需请求一次就可以了,而不必一次次向服务器发送请求。
它的原理就是把见面中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,”background-repeat”,”background-position”的组合进行背景定位,实现多个位置的背景,一张图来搞定。
优点
1 减少网页的http请求,提高页面性能
2 减少图片字节
3 解决比较头疼的命名问题,以前好多张一个个想名字,现在一个名字就搞定
4 更换整个网页风格时更方便,更易维护
缺点
1 图片合并时,要把多张有序合理合并成一张,还要留好足够的空间,防止板块内出现不必要的背景,如果在宽屏,高分辨率的屏幕下的自适应页面,图片如果不够宽,很容易出现背景断裂
2 拼合图片的时间成本加大,CSS Sprites在开发时,需要通过photoshop或其他工具测量计算每一个背景单元的精确位置
3 编码和维护的时间成本会增加,CSS Sprites在维护时,如果页面背景有少许改动,一般就要改这张合并的图片,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。相对于一个可以轻松计算出来状态位置的简单按钮来说,大型的 sprite 会导致无尽地测试和图片状态的重新摆放。
4 不是所有图片都是背景, 背景图片应该留给按钮以及用来装饰元素,而用来传达重要信息的图像应该内联在 XHTML 中。
总之,CSS Sprite是很有用,但也不要一味滥用而超出一个度的限制,需明白过犹不及。
时间: 2024-10-13 00:52:56