I'm adding a cross-browser compatible drop-shadow to a png image (with transparency). It works in Chrome and Safari, but in Firefox the PNG image simply doesn't display at all.
Here's my webpage with the trout in hand logo PNG image in the header:
I'm using CSS and SVG to display the drop-shadow as follows:
-webkit-filter: drop-shadow(20px 20px 20px rgba(0,0,0,0.5));
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
<img src="images/logo.png" class="img-responsive shadowed center-image animated fadeIn">
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="20" dy="20" result="offsetblur"/>
<feComposite in2="offsetblur" operator="in"/>
The Firefox problem is that :
Can not find it.
svg tag to the top of body, maybe your problem was solved.
This link may also be useful
Creating a True Cross-Browser Drop Shadow Effect With CSS3 & SVG