【图片、背景虚化 模糊效果 模糊：blur 灰度：grayscale】★★★★★

.blur {    
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    -webkit-filter: blur(4px); /* Chrome, Opera */
       -moz-filter: blur(4px);
        -ms-filter: blur(4px);    
            filter: blur(4px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false); /* IE6~IE9 */
}

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

 

说明：
 -webkit-filter: blur(2px) grayscale(0);
    -moz-filter: blur(2px) grayscale(0);
      -o-filter: blur(2px) grayscale(0);
     -ms-filter: blur(2px) grayscale(0);  /*blur表示虚化模糊度*/
         filter: blur(2px) grayscale(0.1);   /* grayscale表示灰度*/
        opacity: .7; /* fallback */  

 

 

单纯模糊效果，会有毛边，不自然。。。

http://www.zhangxinxu.com/study/201502/image-baidu-homepage-local-blur.html

解决方案：

.blurcover{ position: absolute; width: 100%; height: 100%;  opacity: 0.3;}
.blur {    
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    -webkit-filter: blur(1px); /* Chrome, Opera */
       -moz-filter: blur(1px);
        -ms-filter: blur(1px);    
            filter: blur(5px); /*程度*/
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false); /* IE6~IE9 */
}

<li>
    <div class="blurcover"> <img src="uploads/dr_pro_2.jpg" alt="" class="blur" /></div>
    <img src="uploads/dr_pro_2.jpg" alt=""/>                
</li>

一张图片调用两次，一次作为底图防止毛边， 另一张图片覆盖在上面，进行滤镜。