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

最新推荐文章于 2022-07-24 10:23:49 发布

weixin_34195364

最新推荐文章于 2022-07-24 10:23:49 发布

阅读量479

点赞数

本文介绍了两种实现毛玻璃效果的方法：一种是通过CSS来设置，但存在浏览器兼容性问题；另一种是使用Canvas技术，该方法更为推荐。文章详细解释了CSS方法在不同浏览器中的表现，并提供了使用Canvas实现模糊效果的参考链接。

方式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);
}