首页 > 在CSS中使用blur()导致图像模糊区域越过元素实际大小怎么办?

在CSS中使用blur()导致图像模糊区域越过元素实际大小怎么办?


楼主使用的是webkit的私有属性吧?

img { -webkit-filter:blur(2px); }

这个blur是高斯模糊。在设置模糊半径以后,图像中的像素点会通过一定的算法(参考《高斯模糊算法》)重新计算rgba值。

webkit的blur计算基于元素及其子元素border-box内部的内容,但得到的像素不被限制在border-box内。这就相当于,在布局不变的情况下,这个元素被拿了出来,高斯模糊之后,这个元素就有了小量的溢出(溢出的值跟webkit的高斯模糊算法如何分配权重有关),再对齐中心点放回去。

所以给img标签父层级设置overflow:hidden,不知能满足楼主的要求否。

【热门文章】
【热门文章】