css背景图毛玻璃,css仿ios7背景图片模糊效果,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代码如下：

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

新建文命名为blur.svg的SVG文件：

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">

如下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 */

}