CSS滤镜让图片模糊(毛玻璃效果)
早前在京东上就看见这个蒙板效果,很少网站这样用,如下图:
将模糊滤镜加在body后,再在最上加一个普通半透明遮罩层即可,随手转来如下代码
CSS代码:
.blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */ }HTML代码:
<img src="mm1.jpg" /> <img src="mm1.jpg" class="blur" />
相关文章
本文作者:漫游
文章标题: CSS滤镜让图片模糊(毛玻璃效果)
本文地址:http://www.roammemo.com/html5/183.html
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。
本文地址:http://www.roammemo.com/html5/183.html
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。