CSS Sprite（CSS贴图）

吐槽：oschina的markdown怎么这么丑？

咱们常常看到这样的CSS描述：

.demo {
    background-image: url('img/demo.png');
}

.demo-a {
    background-position: 0 -10px;
}

.demo-b {
    background-position: -48px -10px;
}

其中的demo.png就是将多个小图像整合到一块儿的图片，目的是减小对资源请求次数。

那么怎么整和呢，除了图片处理的软件，这里推荐几个在线的工具：

• SpritePad：在线制做贴图（自动对齐功能须要注册收费）

SpritePad

拖动须要整合的图片到指定窗口，嗯……直接看效果图吧（但愿爱奇艺能原谅我从其APK里借用的图标— —||）

搞定以后，最好先FitDocument一下，剪裁无用区域，而后点击Download就会下载整合后的图片和CSS文件。

• SpriteMe：浏览器书签式操做，打开指定的页面，运行收藏的SpriteMe书签，自动抓取页面图片资源并整合

SpriteMe

具体操做参考其网站说明，比较简单。

• SpriteCow：有贴图可是不肯定定位参数

SpriteCow

框选想要定位的图片，页面底部会自动计算位置和宽高，比较很差的就是它选择的图片内容的边缘，没有缓冲留白，感受对图标类型的也不实用。

对于须要常常变更的图片就不要费心整合到一张图里了