Giusto, la questione è un po’ più complicata… quando un elemento come l’header riceve una proprietà backdrop-filter, diventa la radice per l’effetto. Di conseguenza, qualsiasi elemento discendente annidato all’interno di quella radice (come i pannelli del menu a discesa) può sfocare solo ciò che si trova all’interno di quella radice… non può “vedere” il contenuto della pagina al di fuori dell’header, anche se i pannelli si estendono oltre di esso, quindi non si ottiene alcun effetto di sfocatura in quelle aree.
Invece, puoi utilizzare uno pseudo-elemento sull’header per evitare questa restrizione relativa alla radice.
.d-header {
position: relative;
isolation: isolate;
background-color: transparent;
&::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: color-mix(in srgb, var(--header_background) 70%, transparent);
backdrop-filter: blur(12px);
pointer-events: none;
}
}
.menu-panel {
background-color: color-mix(in srgb, var(--secondary) 70%, transparent);
backdrop-filter: blur(12px);
}
.user-menu .quick-access-panel .read {
background: transparent;
}