backdrop-filter huurrelasiin
Luokaa huurrelasin sumennustehosteita muun sisällön päälle asetetuissa elementeissä backdrop-filter-ominaisuudella.
backdrop-filter huurrelasiin on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mikä on backdrop-filter?
backdrop-filter lisää graafisia tehosteita elementin takana olevalle alueelle eikä itse elementtiin. Elementin on oltava osittain läpinäkyvä (taustan alfakanavan arvon on oltava alle 1 tai taustaa ei saa olla), jotta suodatettu tausta näkyy.
Huurrelasitehoste
Huurrelasitehosteen klassinen toteutus:
<div class="bg-wrapper">
<div class="glass-card">Frosted Glass Card</div>
</div>
-webkit-backdrop-filter-etuliite
Safari vaatii -webkit-backdrop-filter-etuliitteen. Sisällyttäkää se aina standardiominaisuuden rinnalle selainten välistä tukea varten.
Käytettävissä olevat filter-funktiot
backdrop-filter tukee samoja funktioita kuin filter: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().
<div class="bg-wrapper">
<div class="modal-overlay"></div>
</div>
Tumma huurrelasi
Tumma muunnelma peittokuville ja modaalisille ikkunoille:
<div class="bg-wrapper">
<div class="dark-glass">Dark Frosted Panel</div>
</div>
Pinoamiskontekstin edellytys
backdrop-filter luo pinoamiskontekstin. Elementin on oltava kompositoinnissa taustan päällä — sen on siis oltava muuta sisältöä ylempänä pinoamisjärjestyksessä (ei välttämättä z-indexin, vaan maalausjärjestyksen perusteella).
backdrop-filterin suorituskyky
Raskas backdrop-filter: blur() on kallis suorittaa — se pakottaa selaimen renderöimään taustan erillisessä käsittelyvaiheessa. Käyttäkää mobiililaitteilla enintään 20px:n sumennusarvoja. Välttäkää sitä usein uudelleenmaalattavassa sisällössä.
Modaali-ikkuna huurrelasipäällysteellä
Modaalinen valintaikkuna huurrelasipäällysteellä:
<div class="modal-backdrop">
<div class="modal">Modal Content</div>
</div>
Kiinnittyvä navigointi lasitehosteella
Huurrelasitehostetta käyttävä kiinnittyvä navigointipalkki:
<div class="bg-wrapper">
<nav class="navbar">Sticky Nav</nav>
</div>
Selaintuki
backdrop-filter on tuettu Chrome-versiosta 76, Firefox-versiosta 103 ja Safarista versiosta 9 alkaen (webkit). Sisällyttäkää aina -webkit-etuliite. Tarkistakaa ajantasaiset tiedot caniuse.com-sivustolta ja tarjotkaa peittävä varavaihtoehto selaimille, jotka eivät tue ominaisuutta.
Peittävä varavaihtoehto
Tarjotkaa peittävä tausta varavaihtoehdoksi selaimille, jotka eivät tue backdrop-filter-ominaisuutta:
<div class="bg-wrapper">
<div class="glass">Fallback-aware glass panel</div>
</div>
Pikatarkistus
Mitä elementillä täytyy olla, jotta backdrop-filter näkyy?
Kertaus
backdrop-filter lisää suodatintehosteita elementin takana olevaan sisältöön. Elementin on oltava läpinäkyvä, jotta tehoste näkyy sen läpi. Klassinen huurrelasi käyttää yhdistelmää blur() + saturate(). Sisällyttäkää Safari-tukea varten aina -webkit-backdrop-filter. Tarjotkaa peittävä varavaihtoehto @supports-säännön avulla.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”backdrop-filter huurrelasiin” ilmainen?
Kyllä – oppitunnin ”backdrop-filter huurrelasiin” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”backdrop-filter huurrelasiin”?
Luokaa huurrelasin sumennustehosteita muun sisällön päälle asetetuissa elementeissä backdrop-filter-ominaisuudella. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”backdrop-filter huurrelasiin”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- filter: blur, brightness, contrast, grayscale
- backdrop-filter huurrelasiin
- mix-blend-mode tasojen sekoittamiseen
- isolation-ominaisuus