Размытие в фильтре фона не имеет никакого эффекта. ⇐ CSS

[Anonymous]

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

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

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

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

:root {
--main-bg-color: 40, 44, 52;
--secondary-bg-color: 66, 75, 94;
--main-color: 255, 255, 255;
--secondary-color: 221, 221, 221;
--anchor-color: 20, 174, 234;
--anchor-visited-color: 197, 138, 249;
--primary-font-size: calc(10px + 2vmin)
}

#navbar-container {
width: 100%;
position: sticky;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 10px 30px 10px #000
}

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

body {
font-size: calc(10px + 2vmin);
min-height: 100vh;
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: rgb(var(--main-bg-color));
color: rgb(var(--main-color))
}

code {
font-family: source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace
}

@media (prefers-reduced-motion: no-preference) {
.Spin-image {
animation: image-spin infinite 20s linear
}
}

a {
color: rgb(var(--anchor-color))
}

p {
margin: 1rem
}

a:visited {
color: rgb(var(--anchor-visited-color))
}

div.loader {
height: 80vh;
width: 100%;
display: grid;
place-content: center
}

div.loader>div {
border: 16px solid transparent;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite
}

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg)
}

to {
-webkit-transform: rotate(360deg)
}
}

@keyframes spin {
0% {
transform: rotate(0)
}

to {
transform: rotate(360deg)
}
}

:root {
--aimation-duration: 7s
}

.home-header {
background-color: rgb(var(--main-bg-color))
}

.home-header>img {
border-radius: 10%;
max-height: 15rem;
float: right;
margin: 1.5rem 2rem 1.5rem 1.5rem;
height: 40vmin;
pointer-events: none
}

.programming-languages {
float: left;
margin: 0 1rem;
max-width: 15rem;
width: 40%;
display: grid;
place-items: center;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "csharp js" "csharp react"
}

.programming-languages .react {
grid-area: react;
animation: rotateZ var(--aimation-duration) infinite linear
}

.programming-languages .js {
grid-area: js
}

.programming-languages .csharp {
position: relative;
grid-area: csharp
}

.programming-languages .csharp #c-sharp-hash {
position: absolute;
height: 20%;
left: 32%;
top: 38%;
animation: rotateY var(--aimation-duration) infinite linear
}

.programming-languages img {
width: 100%;
height: 100%;
object-fit: contain
}

h1 {
margin: 1rem
}

@keyframes rotateY {
to {
transform: rotateY(360deg)
}
}

@keyframes rotateZ {
to {
transform: rotate(360deg)
}
}

@keyframes image-spin {
0% {
transform: rotate(0)
}

to {
transform: rotate(360deg)
}
}

@keyframes slide {
0% {
transform: translate(0)
}

to {
transform: translate(-100%)
}
}

.logos {
width: 100%;
overflow-x: hidden;
white-space: nowrap;
overflow-y: visible;
position: relative
}

.logos:before,.logos:after {
position: absolute;
top: 0;
width: 250px;
height: 100%;
content:  "";
z-index: 2
}

.logos:before {
left: 0;
background: linear-gradient(to left,rgb(var(--main-bg-color),0),rgb(var(--main-bg-color),1))
}

.logos:after {
right: 0;
background: linear-gradient(to right,rgb(var(--main-bg-color),0),rgb(var(--main-bg-color),1))
}

.logos:hover .logos-slide {
animation-play-state: paused
}

.logos-slide {
min-width: 100%;
flex-flow: row nowrap;
display: inline-flex;
justify-content: space-around;
align-items: center;
animation: 20s slide infinite linear;
overflow-y: visible
}

.logos-slide * {
display: inline;
flex: 1 1 auto
}

.logos-slide img {
filter: brightness(1.25);
max-height: 20vh;
max-width: 200px;
margin: 0 40px
}

:root {
--hover-transition-duration: .5s;
--alpha-level: .7;
--expand-bezier: cubic-bezier(0, 1.6, 1, 1.2);
--collapse-bezier: cubic-bezier(1, -.6, .4, 1)
}

#navbar-container {
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
}

.navbar>div:first-child {
flex: 1;
position: relative
}

.navbar>div:first-child div:has(.hamburger-react) {
padding-inline-start:1ch;width: fit-content;
height: 100%;
display: grid;
align-items: center
}

button.langButton:hover {
cursor: pointer;
filter: brightness(.5)
}

button.langButton span {
opacity: 0
}

button.langButton {
align-self: center;
margin: .5em .5em .5em 0;
max-width: 2.5rem;
max-height: 2.5rem;
border: none;
color: #fff;
padding: 1rem;
text-align: center;
text-decoration: none;
border-radius: 50%;
background-size: cover
}

nav {
overflow: hidden;
background: rgb(var(--main-bg-color));
position: absolute;
box-shadow: 0 2rem 2rem #000
}

nav:not(.isOpen) {
transition: height .4s var(--expand-bezier)
}

nav.isOpen {
transition: height .4s var(--collapse-bezier)
}

nav>a {
display: flex;
align-items: center;
padding: 1rem;
text-decoration: none;
color: rgb(var(--main-color));
-webkit-transition: background-color var(--hover-transition-duration) linear;
-moz-transition: background-color var(--hover-transition-duration) linear;
-o-transition: background-color var(--hover-transition-duration) linear;
-ms-transition: background-color var(--hover-transition-duration) linear;
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))
}

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

[url=/]Glówna[/url][url=/contact-info]Kontakt[/url][url=/technology-stack]Stack technologiczny[/url][url=/chat]Porozmawiaj z chatbotem AI[/url]PLENG
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.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.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 ... any-effect