加载gif透明底色_教你轻松消除透明GIF白色毛边

我们看下面这张有背景色的GIF图，看上去非常不错吧。

可是，当把圆圈周围的背景去掉变成透明底的时候，我们会看到有明显的锯齿，这是为什么呢？

我们先来看下面2张图，他们是用同样的图片制作的，只是导出GIF的时候上面的图是透明背景，而下图是有背景色的。这是为什么呢？

说明：黑底是透明底生成后改成的黑色底，否则都是白色是就看不到了

这是因为GIF所支持的alpha通道只有1-bit，也就是说上面透明背景图和半透明的部分最终都是完全透明掉了，所以就看到了上图（）那样的结果。带上背景色则可以生成半透明那种效果，所以开头那个加载动效图，实际上就是通过添加底色来解决圆形存在锯齿的问题，只是让肉眼看不出来。

通过图片放置的地方添加相应的背景色是比较不错的解决方案，以前有很多表情包也是透明底，为了避免白色毛边，会额外添加一圈白边。

可是在暗黑模式下就一览无余了，不过表情包大家也都习惯了加上白边处理。

那像放到网页或APP里面的logo或者图标之类，页面背景并不是一成不变的，要加背景色那得匹配做很多张图，因此必须要做成透明底，那该如何处理呢？

加了黑底为了看到存在的白色毛边

在PS导出为GIF的时候，我们设置杂边的颜色，用吸管取色选择后生成GIF。

这样生成的GIF就没有白色毛边了，不过这种方法只适用于边缘为纯色的图形，如果有多种色彩就不太适合。

同样加了黑底可以对比看到没有了白色毛边

安利：用SOOGIF工具多图合成，已经帮你进行过杂边处理咯，不会有白色毛边。

当然，同样的方法，我们可以不取图案的颜色，大家也可以选择与放置页面背景接近的颜色，有点类似描边但肉眼看不出来，跟直接加背景色是一个意思，只不过没有大片的背景色，对于有点点渐变色的背景也容易适配。

其实，本来这是由于是GIF格式天生的缺陷，因此如果可以的话选择APNG格式（IE可能不支持）或者在前端展示的时候采用其他方案，而不是上传一个GIF图片。