filter：blur（1px）;在Firefox，IE和Opera中不起作用 [英] filter: blur(1px); doesn't work in firefox, IE, and opera

问题描述

我有一个CSS的问题：当我尝试做的时候

  -webkit-filter：blur（1px）; 
 -moz-filter：blur（1px）; 
 -ms-filter：blur（1px）; 
 -o-filter：blur（1px）; 
 filter：blur（1px）; 
  

在safari和chrome中看起来非常完美，但是firefox中完全不显示模糊效果，歌剧或IE。那些浏览器是否支持它？还是有另一种方法让整个页面模糊？

解决方案

尝试使用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 =https://i.stack.imgur.com/oURrw.png/>< svg version =1.1xmlns =http：//www.w3。组织/ 2000 / SVG> < filter id =blur> < feGaussianBlur stdDeviation =3/> < / filter>< / svg>  

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);

it looks perfect in safari and chrome, but the blur doesn't show up at all in firefox, opera, or IE. Do those browsers support it? Or is there another method of getting the entire page to blur?

解决方案

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>

这篇关于filter：blur（1px）;在Firefox，IE和Opera中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！