Javascript 如何在另一个包含文本的div上为div带来霜玻璃效果

我想在div上有一个

磨砂玻璃

效果

互联网上很少有关于如何实现这一点的例子，但是大多数人都说，你的

身体有一个背景图像

，然后你在上面有一个小

div

，你想为这个小

div

使用

磨砂玻璃

效果

然而，我的情况略有不同，因为我没有任何背景图像，而是在

div

下有一些文本（或任何其他

DOM

），还有另一个

div

部分覆盖了第一个

div

，我希望在第二个

div

上有

霜玻璃效果。下面是一个小例子

HTML

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

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

我想为
div
类
top
提供
磨砂玻璃
效果，实际上
是固定定位的

Codepen
示例-

使用CSS有没有办法达到这种效果

感谢所有指针
使用css
过滤器
属性，例如
过滤器：模糊（3px）

找到一个基于你的演示

.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;
}