背景滤镜未在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中得到了这个错误：invalid property value

编辑；我自己发现了这个问题:我有两个玻璃形态的div。由于某些原因，这导致了效果的取消。简而言之:上面的样式可以工作，但不适用于堆叠的div

Answer 1

使用10px而不是10em

你的背景滤镜起作用了。