CSS Sprites 技术分析

2020-05-14 07:32:54易采站长站整理

由于图片的位置需要固定为某个绝对数值,这就失去了诸如

center
之类的灵活性。

前面我们也提到了,必须限制盒子的大小才能使用CSS Sprites,否则可能会出现出现干扰图片的情况。这就是说,在一些需要非单向的平铺背景和需要网页缩放的情况下,CSS Sprites并不合适。YUI的解决方式是,加大图片之间的距离,这样可以保持有限度的缩放。

总结

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

推荐阅读:

CSS Sprites: Image Slicing’s Kiss of Death
14 Rules for Faster-Loading Web Sites
High Performance Web Sites

更新:有网友问到IE6不支持png的问题。其实真相是,IE6不支持的是半透明(alpha transparency)的png,对于全透明的png, IE6并不存在问题。因此,在实践中,不涉及到半透明而需要透明背景的图片,其实都可以使用png, 这是很安全的。