你的位置: 首页 > HTML5网站开发 > 正文
CSS滤镜让图片模糊(毛玻璃效果)
作者:漫游   分类: HTML5网站开发    时间:2016-11-9 13:58   热度:5418°   字号:        评论:0 
作者:漫游   分类: HTML5网站开发    时间:2016-11-9 13:58   热度:5418°  评论:0 条 

早前在京东上就看见这个蒙板效果,很少网站这样用,如下图:

QQ截图20161109135912.png


将模糊滤镜加在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
版权声明:若无注明,本文皆为“漫游的备忘录”原创,转载请保留文章出处。
返回顶部    首页    手机版本   
版权所有:漫游的备忘录    站长: 漫游    模板基于:博闻广记 v1.2   程序:emlog