html img图片模糊效果

html img图片模糊效果

2019-06-19 10:42:15 邓轩 阅读数 1086  收藏 更多

分类专栏: WEB前端

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/qq_39019735/article/details/92806621

最近项目中有一个图片素材需要收费,不能下载和预览于是想到图片模糊处理,网上找了找资料先看效果图:

处理前:

处理后:

CSS代码:

.blur {
    filter: blur(20px);
    -webkit-filter: blur(20px); /* chrome, opera */
    -ms-filter: blur(20px);
    -moz-filter: blur(20px);
}

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


​​​注:blur里面的值越大越模糊。

posted @ 2019-12-07 16:31  grj001  阅读(433)  评论(0编辑  收藏  举报