利用CSS对图像进行模糊处理

怡然一记 • 2022-12-02 • 前端开发, 学习笔记, 技术分享 • 301 阅读

如果你使用过PS之类的软件，那么你肯定对滤镜，混合模式等这类效果肯定不会陌生，CSS也提供了相关的方法，我们可以通过CSS的filter属性来实现

通过filter属性实现滤镜效果

blur()函数实现高斯模糊

使用方法，代码示例:

<style>
img {
   width: 200px;
   height: 200px;
   filter: blur(5px);
}
</style>
<body>
  <img src="img.png">
</body>

实现效果:

原图

高斯模糊后

你也来试试吧!

提示:

每次预览后，需要再次点击编辑代码才会回到代码界面进行修改或者复制

怡然一记
利用CSS对图像进行模糊处理
https://xsunhua.cn/695.html
THE END
分享
二维码
打赏
海报
利用CSS对图像进行模糊处理
如果你使用过PS之类的软件，那么你肯定对滤镜，混合模式等这类效果肯定不会陌生，CSS也提供了相关的方法，我们可以通过CSS的filter属性来实现 通过filter属性……
<<上一篇
下一篇>>
文章目录
关闭
目 录