CODEWITHSUNDEEP
css
DavidPL
DavidPL

Reputation: 119

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

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>

Upvotes: 4

Views: 13882

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105963

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)

Upvotes: 8

Related Questions