【CSS3】滤镜+【html5】画布实现图片模糊效果

最新推荐文章于 2022-03-29 11:21:14 发布

原创

最新推荐文章于 2022-03-29 11:21:14 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了三种实现图片模糊效果的方法：CSS3 blur滤镜、SVG滤镜和HTML5 Canvas结合JavaScript的高斯模糊算法。CSS滤镜在大部分现代浏览器中得到支持，但存在中间模糊两边留白的问题。通过HTML5 Canvas可以实现更精确的模糊效果，借助StackBlur.js库，可以设置模糊半径并处理图片。

前一阵子在做虾米音乐播放器的时候偶然发现页面背景颜色和歌曲专辑封面很相像，请教老师才知道这是通过模糊效果实现的。

现在做个小小的总结，实现方法大致有如下三种：

1.CSS3 blur滤镜实现
2.CSS3 SVG滤镜实现
3.html5 canvas+js模糊函数(高斯模糊算法)实现

前2种方法实现起来比较简单:
(1)在img标签中添加类名"blur"。
(2)在css样式中添加如下代码:
-webkit-filter: blur(10px); /* Chrome, Opera */