filter：blur（1px）;在Firefox，IE和Opera中不起作用

本文介绍了filter：blur（1px）;在Firefox，IE和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中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..