CSS Sprites的应用

 

原理

CSS Sprites的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，通过背景图片外加背景图片定位来实现的。（注意是背景图片）

CSS Sprites可以减少http的请求数（没整合的图片，每一张都需要请求一次。整合成一张只要请求一次），减少网站的加载时间。

应用

淘宝的 CSS Sprites

HTML:
<!--icon 调用这张图,作为一个基类，其他地方要用到这张图的都可以调用这个类; i-btn是需要设置的背景定位及宽高-->
<a href="javascript:void(0)" class="icon i-btn"></a> 
<b class="icon i-tip-1"></b>
<i class="icon i-tip-2"></i>

CSS:
/* icon 调用这张图,作为一个基类，其他地方要用到这张图的都可以调用这个类 */
.icon{ display:inline-block; *display:inline; *zoom:1; background:url(img) no-repeat;}/* 如果是图标类的整合 就可以设置一个默认的宽高 PS: 16*16 或 32*32  */
.i-btn{ width:135px; height:35px; background-position:x y;}/* 切记 这里的背景定位最好不要使用bottom或right之类的。后期如果图片又增加了会很麻烦 */
.i-tip-1{width:5px; height:10px; background-position:x y;}
.i-tip-2{ width:10px; height:18px; background-position:x y;}

整齐的图标整合，清晰有条理（背景定位也方便计算坐标）：

注意事项

1. 不要等到完成切图之后才开始整合图片
2. 留白多，浏览器占用的内存也多
3. CSS Sprites调用的图片不能被打印，除非在@media中特别添加 print声明——by RichB
4. 修改一个图标需要修改整张图片
5. 及时清理不再使用的图片
6. 可以根据图片的权重做分离

 

推荐一个不错的图片整合工具 CSS Gaga 的 autosprite