Question

我已经使用了模糊滤镜用于chrome并且它工作正常，我尝试添加moz滤镜，以便它可以在Firefox中显示并且它不会模糊？

图像模糊的代码：

.img-wrap:hover img {

    filter: blur(4px);
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    height: 150px;
    position: relative;
    width: 150px;
}

干杯

Answer 1

CSS过滤效果arent supported in Firefox，您需要查看使用SVG blur effects，有一个tutorial here which may help:

HTML

<img src="yourImage.png" alt="" />
<svg:svg>
    <!-- Filter ID/Name -->
    <svg:filter id="blurFilter">
        <!-- Amount of Gaussian Blur that should be applied -->
        <svg:feGaussianBlur stdDeviation="0.9"/>
    </svg:filter>
</svg:svg>

CSS

img { filter:url(#blurFilter); }

为什么赢得＆＃t; t-filter：blur（4px）在firefox中工作？

1 个答案: