css雪碧图生成工具4.3。
compass Spriting with Compass，支持smart,horizontal,vertical,diamond几种模式，不过smart模式下不支持设置图片间距。如果要跟gulp集成的话可以用gulp-ruby-sass.
雪碧图被运用在众多使用了很多小图标的网站上。
相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。
一、使用雪碧图的优点有以下几点：
将多张图片合并到一张图片中，可以减小图片的总大小。
将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。
二、雪碧图的制作与使用方法：
使用图像编辑软件如Photoshop将多张图放到同一个图层并导出。
使用自动化构建工具自动拼接合并后的图片。
引用图片时，图片地址为合并后的图片地址。
CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。
作用：
作用：background-size设置 背景图像的大小尺寸 。
一、margin和width实现水平居中
优点： 实现方法简单易懂，浏览器兼容性强；
缺点： 扩展性差，只能针对已知宽度的div，无法自适应未知项情况。
)
二、inline-block实现水平居中方法
做点： 简单易懂，扩展性强；
缺点： 需要额外处理inline-block的浏览器兼容性。
1）、opacity作用于元素以及元素内的 所有内容的透明度 ，子元素会继承父元素的 opacity 属性。
2）、rgba()只作用于元素的颜色或其背景色，后代元素不会继承透明性,只是针对自己本身有效，无法使内部的所有元素透明。
