javascript - 如何为 div 带来磨砂玻璃效果，而不是包含文本的另一个 div

Question

我想在 div 上实现 frosty-glass 效果。 互联网上很少有关于如何实现此目的的示例，但是大多数人都说，您为您的 body 设置背景图像，然后在其上方放置一个小 div，并希望为该小 提供 frosty-glass 效果div.

但是我的情况略有不同，因为我在 div 下没有任何背景图像，而是有一些文本(或任何其他 DOM )，还有另一个 div 部分覆盖了第一个 div，我希望对第二个 div 具有 frosty-glass 效果。下面是一个小例子

HTML

<div class = 'parent'>
  <div class = 'top'>

  </div>
  <div class = 'bottom'>
    Some div...
  </div>
 </div>

CSS

.parent {
  height: 200px;
  width: 100%;
}

.top {
  height: 80px;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0,0,0,.2);
}
.bottom {
  height: 150;
  width: 100%;
  margin-top: 10px;
}

我正在寻找 div 具有 frosty-glass 效果，其类 top 实际上是固定定位.

Codepen 示例 - https://codepen.io/Volabos/pen/RwWxwQd

有什么方法可以使用 CSS 来达到这种效果吗？

感谢您的指点

Answer 1

使用 css filter 属性，例如。 过滤器:模糊(3px);。

查找基于您的演示 here .