我想在 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 来达到这种效果吗?
感谢您的指点
最佳答案
使用 css filter
属性,例如。 过滤器:模糊(3px);
。
查找基于您的演示 here .
关于javascript - 如何为 div 带来磨砂玻璃效果,而不是包含文本的另一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61597247/