Question

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

我想将带有gif的div放在我的标题之上 - 我想让现实的雪落在我当前的标题图像上。我知道已经有jquery下雪的动画，但它们并不像现实这样真实。

如果通过css无法做到这一点 - 删除黑色的解决方法是什么？将其另存为png？（然后我可以使用step方法使png动画化。）

修改：这是＆＃34;工作＆＃34;小提琴代码https://jsfiddle.net/7djkkw49/

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

您可以查看mix-blend-mode

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

或者我会建议background-blend-mode

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

但支持尚未that good，您可能还想看看SVG（a link among others）。

最简单的方法是编辑gif并将黑色设置为透明（quick example）

有没有办法用alpha显示gif作为透明度？

1 个答案: