首页 > 代码库 > css3的滤镜模糊的效果

css3的滤镜模糊的效果

      最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴。

代码如下:

    div{//设置半透明滤镜效果

      opacity: 0.5;
      filter:alpha(Opacity=50); 

     }

1、filter:对IE设置半透明滤镜效果,filter:alpha( Opacity=50)代表该对象50%半透明,支持IE8及以下浏览器。
2、opacity:css3属性,对除IE外所有浏览器支持包括谷歌,火狐,IE9及以上浏览器。

 

  div{//设置模糊滤镜

   -webkit-filter:blur(3px);

   -moz-filter:blur(3px);

   filter:url(blur.svg#blur);

   filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=‘3‘);

   filter:blur(3px);

  }

 1.属性尚未成为W3C标准的一部分,所以需要添加前缀,目前仅 -webkit-filter:blur(3px) 前缀写法Chrome浏览器支持。

 2.firefox不支持这样直接的写-moz-filter:blur(3px),需要引入blur.svg的文件才能完成与其它众浏览器一样的模糊效果,而该文件里的代码是这样滴:

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

只要在css样式中引入该文件就ok了,引入样式写法如下: filter:url(blur.svg#blur);

3.IE浏览器直接通过滤镜的写法就可以了: filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=‘3‘);但是只支持 IE6~IE9,

IE10以及以后的IE11都是支持SVG的滤镜的,但是,此demo在这些浏览器下是无效的,为何?

好像因为其不支持直接在CSS使用使用filter: url的写法,具体解决方法还在研究中。