Размытие в фильтре фона не размывает фон, в то время как тот же эффект работает с родительским элементом. ⇐ Html

[Anonymous]

У меня есть фрагмент ниже. Как можно видеть, верхняя панель имеет некоторую прозрачность + фоновый фильтр: размытие(20px), тогда как меню навигации не имеет такого эффекта.
Я хочу применить то же самое. эффект, определив аналогичный CSS для элемента nav, но он ничего не делает. Я пытался сделать подобное для элементов привязки внутри навигации, но все равно безуспешно.
Есть идеи, почему это не работает и какое может быть решение?
Это CSS, который работает на верхней панели (

Код: Выделить всё

navbar-container

), а не на элементе nav:

Код: Выделить всё

background: rgb(var(--main-bg-color),var(--alpha-level));
backdrop-filter: blur(20px);

Я пробовал удалять переходы, эффекты box-shadow, но пока ничего не помогло.

Код: Выделить всё

:root {
--main-bg-color: 40, 44, 52;
--secondary-bg-color: 66, 75, 94;
--main-color: 255, 255, 255;
--secondary-color: 221, 221, 221;
--hover-transition-duration: 0.5s;
--alpha-level: 0.7;
--collapse-bezier: cubic-bezier(1, -0.6, 0.4, 1);
}

#navbar-container {
height: 3rem;
width: 100%;
position: sticky;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 10px 30px 10px #000;
background: rgb(var(--main-bg-color), var(--alpha-level));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}

.navbar {
box-sizing: border-box;
max-width: min(60ch, 100%);
margin: 0 auto;
display: flex;
align-items: stretch;
}

nav {
background: rgb(var(--main-bg-color), var(--alpha-level));
backdrop-filter: blur(20px);
top: 3rem;
overflow: hidden;
position: absolute;
box-shadow: 0 2rem 2rem #000;
transition: height 0.4s var(--collapse-bezier);
}

nav > a {
display: flex;
align-items: center;
padding: 1rem;
text-decoration: none;
color: rgb(var(--main-color));
transition: background-color var(--hover-transition-duration) linear;
}

.current-location,
nav > a:hover {
background-color: rgb(var(--secondary-bg-color));
}

nav > a:hover,
nav > a:hover:visited {
color: rgb(var(--secondary-color));
}

nav > a,
nav > a:visited {
color: rgb(var(--main-color));
}

#text {
font-weight: bold;
}

#root {
max-width: min(60ch, 100%);
margin: 0 auto;
}

Код: Выделить всё

[url=/]Glówna[/url]
[url=/contact-info]Kontakt[/url]
[url=/technology-stack]Stack technologiczny[/url]
[url=/chat]Porozmawiaj z chatbotem AI[/url]





Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis tincidunt metus, et luctus risus facilisis a. In laoreet arcu erat, congue condimentum est pharetra id. Curabitur commodo mattis odio sit amet hendrerit. Cras odio tellus, egestas in mi ac, vestibulum vestibulum purus. Duis rutrum luctus nisi, id viverra nisi tristique nec. Pellentesque quam augue, tincidunt vel neque sit amet, dignissim maximus nunc. Duis eget tempus quam. Fusce eleifend ante in ipsum faucibus, tincidunt pharetra est facilisis. Aenean sed convallis leo. Phasellus non arcu justo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis tincidunt metus, et luctus risus facilisis a. In laoreet arcu erat, congue condimentum est pharetra id. Curabitur commodo mattis odio sit amet hendrerit. Cras odio tellus, egestas in mi ac, vestibulum vestibulum purus. Duis rutrum luctus nisi, id viverra nisi tristique nec. Pellentesque quam augue, tincidunt vel neque sit amet, dignissim maximus nunc. Duis eget tempus quam. Fusce eleifend ante in ipsum faucibus, tincidunt pharetra est facilisis. Aenean sed convallis leo. Phasellus non arcu justo.

Подробнее здесь: https://stackoverflow.com/questions/793 ... effect-wor