雪碧图的生成

写在开头的话

最近参加了2017ife的一个任务----自定义checkbox， radio样式，花了半天时间，摸索出了一条制做雪碧图的路径，跟你们分享，若是有更好的制做雪碧图的方法，但愿告知一下，在此感谢。

首先

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

使用photoshop进行抠图

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

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

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

使用css-sprite将多个图标合成一张雪碧图

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

雪碧图的优缺点

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

缺点：一、内存缺陷；二、页面缩放有暴露风险三、对爬虫不友好

最后

到这里制做雪碧图就结束了，虽然看起来很简单，但我本身也是摸索了一些时间，但愿对大家有所帮助。

这是个人此次任务的demo-----自定义checkbox， radio样式demo