过滤器:模糊(1px)；不适用于 Firefox、Internet Explorer 和 Opera [英] filter: blur(1px); doesn't work in Firefox, Internet Explorer, and Opera

问题描述

我的 CSS 有问题.当我尝试做

I have a problem with CSS. When I try to do

-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 中根本不显示模糊.那些浏览器支持吗?或者有没有其他方法可以让整个页面变得模糊?

it looks perfect in Safari and Chrome, but the blur doesn't show up at all in Firefox, Opera, or Internet Explorer. Do those browsers support it? Or is there another method of getting the entire page to blur?

推荐答案

尝试使用 SVG 过滤器.

Try with SVG filter.

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="https://i.stack.imgur.com/oURrw.png" />

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

这篇关于过滤器:模糊(1px)；不适用于 Firefox、Internet Explorer 和 Opera的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！