雪碧图的生成

最近参加了2017ife的一个任务----自定义checkbox， radio样式，花了半天时间，摸索出了一条制作雪碧图的路径，跟大家分享，如果有更好的制作雪碧图的方法，希望告知一下，在此感谢。

在网上的图标库中寻找你生成雪碧图所需要的图标，我在阿里巴巴矢量图标库中下载了一个复选框，下载下来之后，我们可以看到图标中间是白色的，接下来我们需要用一些画图软件把中间的白色改成透明色，也就是传说中的抠图，我自己选用的是photoshop。

1.打开图片后，选择菜单栏中的“选择”---->"色彩范围"

接着点击图标的白色区域，然后点“确定”退出，最后按下键盘的delete键，中间的白色就变成透明色了。

2.接下来还要用photoshop设置图标的大小，点击菜单栏“图像”的“图像大小”，设置我们所需要的图标大小。

下面的数据就是我们设置CSS中background-position所需要的位置

优点：1、减少http访问次数，因为每次查看一张图片就会向服务器发起一次http请求，而雪碧图把一些图片整合为一张图片。

缺点：1、内存缺陷；2、页面缩放有暴露风险3、对爬虫不友好

到这里制作雪碧图就结束了，虽然看起来很简单，但我自己也是摸索了一些时间，希望对你们有所帮助。