过滤器:blur(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>

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