对多个堆叠的 div 元素进行模糊效果

Question

当使用模糊滤镜作为多个堆叠元素的背景滤镜时，我遇到了屏幕截图中所示的元素分离问题。这是我当前的 CSS 代码：

background-color: rgba(78, 78, 78, 0.25); backdrop-filter: blur(6px);

我可能没有正确使用模糊滤镜作为背景滤镜。我正在寻求有关如何在这些元素上实现模糊效果而不产生不良分离的建议。是否有正确的方法将模糊应用于这些元素并避免此问题？

Answer 1

您可以将文本包装在单个 div 中，并在父 div 上使用背景和模糊。