Как добиться эффекта размытия на панели навигации?

Question

Я хочу сделать эффект размытия на фоне компонента navbar. Если я использую обычный эффект размытия, существующий на ядре CSS, он не будет работать так, как я хочу, поэтому мне нужна помощь с этим.

Примеры:

На первом изображении в нижней части панели есть «прозрачный фон», но это не прозрачность. С правой стороны находится панель навигации с этим эффектом размытия. Я попытался использовать CSS эффект размытия, но он делает пункты меню нечитабельными.

Answer 1

Это делается путем сочетания установки непрозрачности с цветом фона и добавления фильтра размытия.

Для примера ниже посмотрите background:rgba(0,0,0,.7) и backdrop-filter: blur(5px).

Для цвета фона вы должны использовать RBGA вместо hex. Отрегулируйте .7 в конце, чтобы настроить непрозрачность. Аналогично фильтру размытия настройте интенсивность размытия (5px).

.navbar {
background:rgba(0,0,0,.7);
backdrop-filter: blur(5px);

color:#fff;position:fixed;height:300px;width:500px}
img {position:fixed}

<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

<div class="navbar">
transparent black background
</div>