前端小白--工具篇（一）雪碧图CssSprite

本文主要介绍前端的工具CssSprite雪碧图。当图片数量较多，而且搭配合理的情况下，可以有效地提升网页速度；另外，借助 CSS sprite 的特性可以进行图片提前加载处理。

CssSprite雪碧图的优点

• 减少请求数
• 图片总 size减少
• 提前加载图片

CssSprite雪碧图的缺点

• 不建议大图片合并，建议类似图片合并

CssSprite雪碧图如何使用

1.下载雪碧图生产工具CssSprite
下载地址：http://download.csdn.net/download/qq_38209578/10158005
（如果上述的地址无法访问，请找度娘~~）

2.如上图所示选择多张图片

Tips:请注意自己的css中文件夹是否正确，可修改，图片文件名称即该雪碧图的公共类名.img可修改

3.在确认属性无误的情况下，点击右上角生成雪碧图，即可得到一张img.png
4.雪碧图的调用
效果图如下：

.css样式(将底部生成的css代码复制到外部的.css样式文件)

   .img{background:url(images/img.png)  no-repeat;background-size:750px 50px;display:inline-block;}
        .icon_shuma{height:50px;width:50px;background-position:0 0;}
        .icon_shuiguo{height:50px;width:50px;background-position:-50px 0;}
        .icon_shipin{height:50px;width:50px;background-position:-100px 0;}
        .icon_yifu{height:50px;width:50px;background-position:-150px 0;}
        .iocn_jiafang{height:50px;width:50px;background-position:-200px 0;}
        .icon_zhusu{height:50px;width:50px;background-position:-250px 0;}
        .icon_yiliao{height:50px;width:50px;background-position:-300px 0;}
        .icon_shengxian{height:50px;width:50px;background-position:-350px 0;}
        .icon_meishi{height:50px;width:50px;background-position:-400px 0;}
        .icon_meirong{height:50px;width:50px;background-position:-450px 0;}
        .icon_bangong{height:50px;width:50px;background-position:-500px 0;}
        .icon_meizhuang{height:50px;width:50px;background-position:-550px 0;}
        .icon_qita{height:50px;width:50px;background-position:-600px 0;}
        .icon_pingtuan{height:50px;width:50px;background-position:-650px 0;}
        .icon_muying{height:50px;width:50px;background-position:-700px 0;}

.html前端代码调用css

<div class="img icon_shuma">
div>
<div class="img icon_shuiguo">
div>