Is there a way to show gif with alpha as a transparency?

Question

I have a realistic gif animation with snow falling. Snow is white everything else is black. I am wondering, if the CSS allows to make the black color be transparent?

I want to put the div with gif above my header - I want to make realistic snow falling over my current header image. I know there are already animations of falling snow in jquery, but they are not as realistic as this.

If this is not possible via css - what's the workaround to delete the black and save this as a png? (I could then use the step method to make png be animated).

edit: here is "working" fiddle code 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>

any code and gif to show ? have you tried or ook a look at mix-blend-mode ? see caniuse allso for mix-blend-mode. Best is to edit your gif — G-Cyrillus, Nov 11 '16 at 14:52
Possible duplicate of [How to get better transparency with GIFs?](http://stackoverflow.com/questions/1952376/how-to-get-better-transparency-with-gifs) — TylerH, Nov 11 '16 at 15:00
@GCyrillus - yep, You are right. mix-blend-mode does the trick for me!!! But what is its compatibility on different browsers? edit: PS. I've seen that people was making effects like that with video clips .mp4. How to make transparent black color in video file? — DavidPL, Nov 11 '16 at 15:19
yep, mix-blend-mode easily does the trick for FF and Chrome but IE fails. as i commented, best is to edit your gif set the black to be the transparent color. For the video no idea how you want to do this. You may also considerate SVG to do do something more alike background-blend-mode -> : https://jsfiddle.net/7djkkw49/7/ (fails also in IE) — G-Cyrillus, Nov 11 '16 at 15:32
@GCyrillus - anyway You helped me, please post Your comment as an answer so I can mark this as a solution and give You +1. Have a good day :) — DavidPL, Nov 11 '16 at 15:38

score 7 · Accepted Answer · answered Nov 11 '16 at 16:00

you may give a look at 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>

or i would advise 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>

But support is not yet that good, you may also want to take a look at SVG (a link among others).

Easiest thing to do would be to edit the gif and set the black to transparent (quick example)

Consider adding some quote from [the spec](https://www.w3.org/TR/compositing-1/#blendingscreen) like "Screening any color with white produces white; screening with black leaves the original color unchanged" — Oriol, Nov 11 '16 at 16:14
@Oriol - I don't understand. Can You explain it more? (right now I just use class mix-blend-mode: screen; and it does the job well. — DavidPL, Nov 11 '16 at 16:38
@Dawid I meant that the spec explicitly says that `screen` blend mode will work for your case because the white snow will remain white and the black background will become transparent. — Oriol, Nov 11 '16 at 17:05

Is there a way to show gif with alpha as a transparency?

1 Answers1