背景滤镜未应用于 CSS 和 HTML

Question

我正在尝试制作玻璃变形效果，我的问题是webkit背景过滤器没有应用于div的背景。css代码：

.glassmorphism {
background: rgba( 255, 255, 255, 0.20);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
-webkit-backdrop-filter: blur(10em);
backdrop-filter: blur(10em);
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18);
}

html:

<div id="content__body" class="glassmorphism"></div>

我在chrome中得到了这个错误：属性值无效

编辑；我只是自己发现了问题：我有两个玻璃变形的潜水器。由于某种原因，这导致了效果的取消。简言之：上面的样式有效，但不适用于堆叠的divs

Answer 1

使用10px而不是10em

并且你的背景滤镜正在工作。