css - 有没有办法显示带有 alpha 的 gif 作为透明度？

Question

我有一个逼真的下雪 gif 动画。雪是白色的，其他一切都是黑色的。我想知道，如果 CSS 允许使黑色透明？

我想将带有 gif 的 div 放在我的标题上方 - 我想在我当前的标题图片上制作逼真的雪花。我知道 jquery 中已经有下雪的动画，但它们没有这个逼真。

如果这无法通过 css 实现 - 删除黑色并将其另存为 png 的解决方法是什么？ (然后我可以使用 step 方法使 png 具有动画效果)。

编辑:这是“工作” fiddle 代码https://jsfiddle.net/7djkkw49/

.header {
  width: 100%;
  height: 350px;
  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/fa/6c/d2/fa6cd2d0ff6f0b0f6b89537b7d608a00.jpg);
}

.snow {
  width: 100%;
  height: 100%;
  background-image: url(http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=http://mmbiz.qpic.cn/mmbiz/jYVY58x65QgvLU6RVkj81CWN1HI1F6DVWibNczicqmrX1a0Hmeb8FicZOOZ8Gia7Kib67M9Dw6QKjZhEcya93c2ia7zA/0?wx_fmt=gif);
  background-size: 100%;
}

<div class="header">
    <div class="snow"></div>
</div>

Answer 1

你可以看看mix-blend-mode

.header {
  width: 100%;
  height: 350px;
  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/fa/6c/d2/fa6cd2d0ff6f0b0f6b89537b7d608a00.jpg);
}
.snow {
  width: 100%;
  height: 100%;
  background-image: url(http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=http://mmbiz.qpic.cn/mmbiz/jYVY58x65QgvLU6RVkj81CWN1HI1F6DVWibNczicqmrX1a0Hmeb8FicZOOZ8Gia7Kib67M9Dw6QKjZhEcya93c2ia7zA/0?wx_fmt=gif);
  background-size: 100%;
  mix-blend-mode: screen;/* but like opacity it will affect the whole container and content */
}

<div class="header">
  <div class="snow"></div>
</div>

或者我会建议 background-blend-mode

.header {
  width: 100%;
  height: 350px;
  background-image:url(http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=http://mmbiz.qpic.cn/mmbiz/jYVY58x65QgvLU6RVkj81CWN1HI1F6DVWibNczicqmrX1a0Hmeb8FicZOOZ8Gia7Kib67M9Dw6QKjZhEcya93c2ia7zA/0?wx_fmt=gif), url(https://s-media-cache-ak0.pinimg.com/originals/fa/6c/d2/fa6cd2d0ff6f0b0f6b89537b7d608a00.jpg);
  background-blend-mode:screen/* will only affect background */
}

<div class="header">
  <div class="snow"></div>
</div>

但还没有支持that good ，您可能还想看看 SVG ( a link among others )。

最简单的做法是编辑 gif 并将黑色设置为透明 (quick example)