css3 模糊效果

115 阅读 0 评论 76 点赞

我是靠谱客的博主眼睛大含羞草，这篇文章主要介绍css3 模糊效果，现在分享给大家，希望可以做个参考。

整体模糊

想让图片有模糊的效果，我们会想到 CSS3 里的滤镜属性 filter。该属性能像 photoshop 一样处理得到很多的效果，常常用于处理图片，DOM 元素和 video 等也能使用，而且已被大多数现代浏览器支持。

filter 有许多值，这里先介绍要让图片模糊必不可少的一个值 blur()，这是设置高斯模糊，也就是将一个像素点重设为周围像素点的平均值；参数值越大，即周围的范围越大，也就越模糊；参数可设置为像素单位，不接受百分比值；
如 filter: blur(5px)

仔细看看效果会发现有几个问题：

超出图片也被模糊了，尤其是背景色和图片颜色反差很大更容易发现这个模糊化的边缘；
图片边缘内部，很窄的部分是接近透明的，会漏出背景的颜色；

解决方法:
在图片外部加一层容器，容器的宽高与图片一致，设置容器样式为 overflow: hidden; 即可去除边缘模糊；
也可以直接在图片元素上使用 clip: rect(top, right, bottom, right); 剪裁出一个矩形，需要注意剪裁的元素必须为绝对定位的元素，即需要同时设置 position: absolute；
问题二的产生是由于高斯模糊算法，使得图片边缘接近透明，也可理解为图片被剪了一圈。blur() 参数的值越大，越明显，也因此会漏出背景颜色。
解决方式如下：
图片外部添加一层容器，宽高和图片一致，同时设置相同的图片作为容器的背景图，这样漏出来的就是容器里的背景图。