backdrop-filter for frostet glass
Opprett uskarphetseffekter som frostet glass på elementer som ligger over annet innhold, med backdrop-filter.
backdrop-filter for frostet glass er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva er backdrop-filter?
backdrop-filter bruker grafiske effekter på området bak et element, i stedet for på selve elementet. Elementet må ha en viss gjennomsiktighet (en bakgrunn med alfa mindre enn 1 eller ingen bakgrunn) for å vise den filtrerte bakgrunnen.
Effekt med frostet glass
Det klassiske mønsteret for frostet glass:
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
-webkit-backdrop-filter-prefiks
Safari krever prefikset -webkit-backdrop-filter. Inkluder det alltid sammen med standardegenskapen for støtte på tvers av nettlesere.
Tilgjengelige filterfunksjoner
backdrop-filter støtter de samme funksjonene som filter: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
Mørkt frostet glass
En mørk variant for overlegg og modaler:
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
Krav til stablingskontekst
backdrop-filter oppretter en stablingskontekst. Elementet må kompositeres oppå bakgrunnen — det betyr at det må ligge over annet innhold i stablingsrekkefølgen (ikke nødvendigvis på grunn av z-index, men på grunn av malingsrekkefølgen).
Ytelsen til backdrop-filter
Tung bruk av backdrop-filter: blur() krever mye ressurser — nettleseren må gjengi bakgrunnen i en separat omgang. Bruk uskarphetsverdier på 20 px eller mindre for god ytelse på mobile enheter. Unngå det på innhold som males på nytt ofte.
Modal med frostet overlegg
En modal dialogboks med overlegg i frostet glass:
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
Klebrig navigasjon med glass
En klebrig navigasjonslinje i frostet glass:
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
Nettleserstøtte
backdrop-filter støttes i Chrome 76+, Firefox 103+ og Safari 9+ (webkit). Inkluder alltid -webkit-prefikset. Sjekk caniuse.com for oppdaterte data, og tilby en ugjennomsiktig reserve for nettlesere som ikke støtter egenskapen.
Ugjennomsiktig reserve
Tilby en ugjennomsiktig bakgrunn som reserve for nettlesere som ikke støtter backdrop-filter:
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
Hurtigsjekk
Hva må et element ha for at backdrop-filter skal være synlig?
Oppsummering
backdrop-filter bruker filtereffekter på det som er bak et element. Elementet trenger gjennomsiktighet for at effekten skal vises gjennom det. Det klassiske frostede glasset bruker blur() + saturate(). Inkluder alltid -webkit-backdrop-filter for Safari. Tilby en ugjennomsiktig reserve ved hjelp av @supports.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «backdrop-filter for frostet glass» gratis?
Ja – hele teksten i «backdrop-filter for frostet glass» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «backdrop-filter for frostet glass»?
Opprett uskarphetseffekter som frostet glass på elementer som ligger over annet innhold, med backdrop-filter. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «backdrop-filter for frostet glass»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- filter: blur brightness contrast grayscale
- backdrop-filter for frostet glass
- mix-blend-mode for lagblanding
- isolation-egenskapen