CSS背景图片模糊效果溢出绝对定位div容器的问题

有一个设置了背景图片的绝对定位div，应用高模糊度滤镜后，模糊效果溢出了容器，问题效果如下：

原代码如下：

<div class="p-2 position-relative bg-grey-secondary border-0 rounded-2 card">
    <div class="position-absolute w-100 h-100 bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Solid_white.svg/2048px-Solid_white.svg.png);"></div>
</div>

<style>
div > div {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(13px);
    opacity: 30%;
    mask-image: linear-gradient(to top, transparent, black);
}
</style>

问题原因 #

滤镜的模糊效果会向元素外部扩散，默认情况下元素边界不会裁剪这种扩散效果，导致溢出容器。

解决方法 #

方法一：父容器添加overflow: hidden

给相对定位的父容器设置overflow: hidden，直接裁剪子元素溢出的模糊区域，这是最简单的方案：

<div class="p-2 position-relative bg-grey-secondary border-0 rounded-2 card" style="overflow: hidden;">
    <div class="position-absolute w-100 h-100 bg" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Solid_white.svg/2048px-Solid_white.svg.png);"></div>
</div>

方法二：子元素加负边距并扩大尺寸

如果模糊半径较大，仅靠overflow: hidden可能还是有边缘溢出，可给子元素设置负边距，让模糊区域完全包含在父容器内部（需配合父容器overflow: hidden）：

div > div {
    top: -15px;
    bottom: -15px;
    left: -15px;
    right: -15px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: blur(13px);
    opacity: 30%;
    mask-image: linear-gradient(to top, transparent, black);
}

负边距数值建议大于等于模糊半径（这里设为15px，大于13px的模糊半径）。

方法三：使用backdrop-filter（场景适配时）

如果是要实现父容器背景模糊的效果，可直接用backdrop-filter替代子元素的背景模糊，无需担心溢出问题：

.card {
    backdrop-filter: blur(13px);
    background-color: rgba(200, 200, 200, 0.3); /* 配合透明度模拟原效果 */
}

内容的提问来源于stack exchange，提问作者Felix Mühlenhoff