Я хочу иметь эффект frosty-glass для div . Есть несколько примеров, как inte rnet, как этого добиться, однако большинство из них говорят, что у вас есть фоновое изображение для вашего body тогда у вас есть маленький div поверх него и вы хотите иметь frosty-glass эффект для этого маленького div.
Однако мой случай немного отличается, так как у меня нет никакого фонового изображения, а какой-то текст (или любой другой) другие DOM в этом отношении) под div, есть еще один div, который частично покрывает этот 1-й div, и я хочу иметь эффект frosty-glass для этого 2-го 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;
}
Я ищу для получения эффекта frosty-glass для div с классом top, который на самом деле fixed positioned.
Пример Codepen - https://codepen.io/Volabos/pen/RwWxwQd
Есть ли способ получить этот эффект, используя CSS?
Спасибо за любой указатель