css3毛玻璃模糊效果

Posted 名字不能缺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3毛玻璃模糊效果相关的知识,希望对你有一定的参考价值。

技术分享

前段时间,ios7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等。其中,“毛玻璃”一次梆梆出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之(不记得了),国外也有之(比方说CSS tricks上的这篇”lurry Transparent Header Effect from iOS7 in CSS“)~
CSS3 blur滤镜实现
如下测试代码:

.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}

相关html代码如下:

<img src="mm1.jpg" />
<img src="mm1.jpg" class="blur" />

需要注意目前火狐不支持,其他些浏览器,如FireFox到目前还没有支持CSS3 filter. 当然,要实现(比方说)FireFox 24浏览器上照片变模糊的效果,也是可以的。可以使用SVG的模糊滤镜。
新建文命名为blur.svg的SVG文件:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"     
     baseProfile="full">	 
    <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="10" />
        </filter>
    </defs>
</svg>

如下CSS调用代码:

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

完整的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 */
}

以上是关于css3毛玻璃模糊效果的主要内容,如果未能解决你的问题,请参考以下文章

转css3实现ios7“毛玻璃”模糊效果

记录:CSS3 模糊效果

用 CSS3 制作导航条和毛玻璃效果

为啥css毛玻璃效果属性无用

[转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

iOS 高斯模糊 毛玻璃效果