如何淡化背景滤镜模糊的边缘

Question

我想淡化具有透明背景并在其上backdrop-filter: blur()的元素的边缘。

通常，使用背景滤镜时，边缘清晰而笔直。

所以基本上，我希望边缘模糊更少。

.blur,
.behind-blur {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.blur {
backdrop-filter: blur(1px);
}
.behind-blur {
width: 100px;
}

<div class="behind-blur">le le le le le le le le le le le le le le le le le le le le le le le le</div>
<div class="blur">la la la la la</div>

Answer 1

将linear-gradientmask应用于内容后面的伪元素：

.your-box {
position: relative;
}
.your-box::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: red;
mask: linear-gradient(to top, transparent, black 35%);
backdrop-filter: blur(2px);
}

蒙版就像在 Photoshop 中一样：它使用蒙版的 alpha 通道来遮挡应用的任何蒙版。遮罩不透明部分下的任何内容都将被隐藏，而遮罩透明部分下的任何内容都将可见。当然，面具的半透明部分只会部分隐藏下面的内容。

如果不屏蔽元素的内容，则无法将遮罩应用于元素本身。这就是为什么我们在实际元素下方创建一个绝对定位的伪元素，并设置背景并对其应用遮罩。

此示例适用于只需在底部淡出的粘性标题。如果需要它从所有侧面淡出，则需要在蒙版中使用多个渐变，或使用 SVG 蒙版。您可以在上面链接的MDN文章中阅读更多关于这些的内容。