css - 过滤器 : blur(1px); doesn't work in Firefox, Internet Explorer 和 Opera

Question

我对 CSS 有疑问。当我尝试做的时候

-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);

它在 Safari 和 Chrome 中看起来很完美，但在 Firefox、Opera 或 Internet Explorer 中根本不会出现模糊。那些浏览器支持吗？还是有另一种方法可以使整个页面变模糊？

Answer 1

尝试使用 SVG 过滤器。

img {
  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url(#blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}

<img src="/image/oURrw.png" />

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>