html img图片模糊效果
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
最近项目中有一个图片素材需要收费,不能下载和预览于是想到图片模糊处理,网上找了找资料先看效果图:
处理前:
处理后:
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里面的值越大越模糊。