CSS3：图片的高斯模糊效果 其他 2020-02-27 13:01:13 阅读次数: 0

最近项目中需要预览视频中加马赛克的效果（高斯模糊），于是找到了css3的一个属性filter来进行高斯模糊

filter（滤镜）

可以用来定义图片或者div的饱和度，模糊程度，亮度等一系列。具体参考 CSS3：filter 属性

兼容性

大专栏  CSS3：图片的高斯模糊效果方案" class="headerlink" title="兼容性方案">兼容性方案

//高斯模糊
-webkit-filter：blur(10px);
filter:blur(10px);

高斯模糊的这个属性是对整个元素进行高斯模糊。如果你需要局部模糊，需要结合背景定位。原理就是两层图片叠加，底层清晰，上层模糊。接下来我会结合拖拽和背景定位实现图片的局部模糊。下一篇传送门：js拖拽实现