时间戳

首页 > 解决方案 > 如何在另一个包含文本的 div 上为 div 带来磨砂玻璃效果

javascript - 如何在另一个包含文本的 div 上为 div 带来磨砂玻璃效果

问题描述

我想对frosty-glassdiv 产生影响.互联网上关于如何实现这一点的例子很少，但是大多数人都说，你有一个背景图片，body然后你有一个小图片div，并希望frosty-glass对那个小图片有效果div.

但是我的情况略有不同，因为我DOM在 a 下没有任何背景图像，而是一些文本（或任何其他文本）div，还有另一个部分div覆盖了第一个div，我想对frosty-glass第二个产生影响div。下面是一个小例子

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

我正在寻找对with class的frosty-glass效果，实际上是.divtopfixed positioned

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

有没有办法使用 CSS 来产生这种效果？

感谢任何指针

标签： javascripthtmlcss

解决方案

使用 cssfilter属性，例如。filter: blur(3px);.

在此处查找基于您的演示。

推荐阅读