概述
整体模糊
想让图片有模糊的效果,我们会想到 CSS3 里的滤镜属性 filter。该属性能像 photoshop 一样处理得到很多的效果,常常用于处理图片,DOM 元素和 video 等也能使用,而且已被大多数现代浏览器支持。
filter 有许多值,这里先介绍要让图片模糊必不可少的一个值 blur(),这是设置高斯模糊,也就是将一个像素点重设为周围像素点的平均值;参数值越大,即周围的范围越大,也就越模糊;参数可设置为像素单位,不接受百分比值;
如 filter: blur(5px)
仔细看看效果会发现有几个问题:
- 超出图片也被模糊了,尤其是背景色和图片颜色反差很大更容易发现这个模糊化的边缘;
- 图片边缘内部,很窄的部分是接近透明的,会漏出背景的颜色;
解决方法:
在图片外部加一层容器,容器的宽高与图片一致,设置容器样式为 overflow: hidden; 即可去除边缘模糊;
也可以直接在图片元素上使用 clip: rect(top, right, bottom, right); 剪裁出一个矩形,需要注意剪裁的元素必须为绝对定位的元素,即需要同时设置 position: absolute;
问题二的产生是由于高斯模糊算法,使得图片边缘接近透明,也可理解为图片被剪了一圈。blur() 参数的值越大,越明显,也因此会漏出背景颜色。
解决方式如下:
图片外部添加一层容器,宽高和图片一致,同时设置相同的图片作为容器的背景图,这样漏出来的就是容器里的背景图。
最后
以上就是眼睛大含羞草为你收集整理的css3 模糊效果的全部内容,希望文章能够帮你解决css3 模糊效果所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复