模糊图像前面的元素

Question

大家好。我有这个问题。所以我有一个图像。该图像前面是具有宽度和高度的简单元素。我想模糊那个元素，所以看起来图片的那部分是模糊的。我不能在该元素中有任何图像或背景图像。我想在不使用任何额外图像的情况下实现这种效果，只需 css。我尝试设置背景颜色，降低不透明度并设置过滤器：模糊，但看起来不太好。我仍然可以阅读应该模糊的文字。

Answer 1

目前，在没有 javascript 的情况下完全支持是不可能做到这一点的。但是如果你想支持有限的浏览器，你可以使用backdrop-filter

backdrop-filter CSS 属性可让您应用图形效果，例如 模糊或颜色转移到元素后面的区域。因为 它适用于元素后面的所有内容，以查看您的效果 必须使元素或其背景至少部分 透明的。