Is there a way to show gif with alpha as a transparency?
<p>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? </p>

<p>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.</p>

<p>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).</p>

<p><strong>edit: 
here is "working" fiddle code <a href="https://jsfiddle.net/7djkkw49/" rel="nofollow noreferrer">https://jsfiddle.net/7djkkw49/</a></strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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&amp;q=5&amp;r=0&amp;imgflag=7&amp;imageUrl=http://mmbiz.qpic.cn/mmbiz/jYVY58x65QgvLU6RVkj81CWN1HI1F6DVWibNczicqmrX1a0Hmeb8FicZOOZ8Gia7Kib67M9Dw6QKjZhEcya93c2ia7zA/0?wx_fmt=gif);
  background-size: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
    &lt;div class="snow"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>