網頁中實現圖片的毛玻璃效果

方式1，使用Css控制，可是有不兼容的時候

/*
    使用Css，實現毛玻璃效果 方案一
注：1.IE中不支持blur()方法
    2.IE9及如下瀏覽器支持濾鏡 progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)
    3.此方法IE10,IE11不支持,須要使用svg技術解決
*/
.blur {
    filter: url(blur.svg#blur);
    -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);
    /* IE6~IE9 */
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
}

說明：在Google和FF中可使用，在IE中須要考慮兼容問題

方式2，使用Canvas實現，推薦

參考：

Canvas模糊化處理圖片、毛玻璃處理圖片之stackblur.js