最近在做一个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');
Easily find JSON paths within JSON objects using our intuitive Json Path Finder
193
filter:blur(3px);
}
1.属性尚未成为W3C标准的一部分，所以需要添加前缀，目前仅 -webkit-filter:blur(3px) 前缀写法Chrome浏览器支持。
2.firefox不支持这样直接的写-moz-filter:blur(3px)，需要引入blur.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的写法，具体解决方法还在研究中。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
313
收藏
取消收藏
