网页中实现图片的毛玻璃效果

方式1,使用Css控制,可是有不兼容的时候html

/*
    使用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中须要考虑兼容问题web

方式2,使用Canvas实现,推荐浏览器

参考:svg

Canvas模糊化处理图片、毛玻璃处理图片之stackblur.jspost

相关文章
相关标签/搜索