css实现照片模糊效果类似毛玻璃效果

前端技术 2023/09/07 CSS

复制代码
代码如下:

<img class=\"blur\" src=\"test.jpg\" />


css中：

复制代码
代码如下:

.blur {
filter: url(blur.svg#blur);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
}


针对css第一行需要引入文件 blur.svg

blur.svg 的内容如下

复制代码
代码如下:

<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\">
<filter id=\"blur\">
<feGaussianBlur stdDeviation=\"3\" />
</filter>
</svg>

本文地址：https://www.stayed.cn/item/18738

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案