Question

如何通过 HTML5 实现 iOS 7 的实时毛玻璃模糊效果

Answer 1

百度搜一下：使用CSS将图片转换成模糊(毛玻璃)效果
张鑫旭介绍了三种方法。
不行的话搜你的标题：如何通过 HTML5 实现 iOS 7 的实时毛玻璃模糊效果
搜索结果第一个，是知乎的解答。

Answer 2

是CSS3 blur滤镜实现的效果

1，测试代码

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

2，相关HTML代码

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

3 , 也可以通过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>

上面代码红色高亮的就是添加的滤镜代码（其他代码Dreamweaver自动生成，其实，只要一行就够了~）。

CSS调用代码

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

完整的css代码

.blur {    
02        filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */    
03             
04        -webkit-filter: blur(10px); /* Chrome, Opera */    
05           -moz-filter: blur(10px);    
06            -ms-filter: blur(10px);       
07                filter: blur(10px);    
08             
09        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */    
10    }

Answer 3

是通过PS来处理的