Question

我正在为png图像添加跨浏览器兼容的阴影（具有透明度）。它适用于Chrome和Safari，但在Firefox中，PNG图像根本不显示。

这是我的网页，标题为手中的鳟鱼标志PNG图像： http://parkerrichard.com/wordpress/

我正在使用CSS和SVG来显示阴影，如下所示：

.shadowed {
-webkit-filter: drop-shadow(20px 20px 20px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

更新：带有.shadowed类的SVG +图像（复制到我的html中）：

<img src="images/logo.png" class="img-responsive shadowed center-image animated fadeIn">

<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
    <feOffset dx="20" dy="20" result="offsetblur"/>
    <feFlood flood-color="rgba(0,0,0,0.5)"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>
</svg>

如果您对如何在Firefox中出现带有阴影的PNG有任何想法，请告诉我们！谢谢你的时间。

Answer 1

filter: url(#drop-shadow);

Firefox问题是：Can not find it。将svg标记移至正文顶部，也许您的问题已解决。此链接也可能有用 Creating a True Cross-Browser Drop Shadow Effect With CSS3 & SVG

Answer 2

Firefox现在接受过滤器。

所以你可以使用类似的东西：

.shadowed {
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=4, OffY=6, Color='#444')";
  filter: drop-shadow(4px 6px 9px rgba(0,0,0,0.77));
}

SVG阴影使得PNG图像在Firefox中消失

2 个答案: