Durch die Unschärfe im Hintergrundfilter wird der Hintergrund nicht unscharf, während der gleiche Effekt auf das übergeo ⇐ CSS

[Guest]

Ich habe den folgenden Ausschnitt. Wie man sehen kann, verfügt die obere Leiste über etwas Transparenz + Hintergrundfilter: Unschärfe (20 Pixel), während das Navigationsmenü keinen solchen Effekt hat.
Ich möchte dasselbe anwenden Effekt, indem ähnliches CSS für das Element nav definiert wird, aber es bewirkt nichts. Ich habe versucht, Ähnliches für Ankerelemente innerhalb der Navigation zu tun, aber immer noch kein Erfolg.
Irgendeine Idee, warum das nicht funktioniert und was die Lösung sein könnte?
Dies ist CSS, das in der oberen Leiste funktioniert hat (

Code: Select all

navbar-container

-Element) und nicht auf nav-Element:

Code: Select all

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

Ich habe versucht, Übergänge und Box-Shadow-Effekte zu entfernen, aber nichts hat bisher geholfen.

Code: Select all

: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;
}

Code: Select all

[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.