Eighteen Blog

CSS3:图片的高斯模糊效果

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

filter(滤镜)

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

兼容性

这里写图片描述

兼容性方案

1
2
3
//高斯模糊
-webkit-filter:blur(10px);
filter:blur(10px);

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

 评论