模糊的背景，没有透明度，但考虑到后面的颜色

Question

我是CSS的新手，想知道如何实现以下行为:有点模糊，但没有透明度。在这里输入图像描述https://rarible.com/mitama-mint/items

我无法从chrome检查器中推断出任何东西。我试着增加一些透明度，但它不是。

你有什么主意吗?

感谢我用白色背景添加了一些透明度。但这不是正确的行为。

Answer 1

您可以应用模糊背景滤镜，以获得所需的效果。由于您没有提供代码，我将向您展示一个示例，请查看MDN Web Docs。

的例子:

.example-container {
background-image: url("https://interactive-examples.mdn.mozilla.net/media/examples/balloon.jpg");
background-size: cover;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
#example-element {
font-weight: 700;
flex: 1;
text-align: center;
padding: 20px 10px;
background-color: rgba(255, 255, 255, 0.2);
}

<div class="example-container">
<div id="example-element" style="backdrop-filter: blur(10px);">Example</div>
</div>

在MDN页面中，这是一个"属性"，允许您对元素后面的区域应用图形效果，例如模糊或颜色移动。因为它适用于元素后面的所有内容，所以要看到效果，您必须使元素或其背景至少部分透明。">