Backdrop filter i CSS: frosted glass, der forbliver hurtigt

Et backdrop filter i CSS anvender en grafisk effekt, som regel slør, på det, der ligger bag et element. Skriv backdrop-filter: blur(12px) på et element med en delvist gennemsigtig baggrund, og siden under det bliver blødere. Det er frosted glass-udtrykket, der bruges på navigationsbjælker, sheets og kort. Det understøttes i alle nuværende browsere. Håndværket ligger i at holde det slørede område småt, radius beskeden og reserven læselig.

Den grundlæggende frosted glass-opskrift

Tre ting laver glas: en gennemskinnelig fyldning, så baggrunden kan ses, selve sløringen og en svag kant, så panelet har en form. De fleste tilføjer også et lille løft i mætning, fordi sløring udjævner farver og efterlader dem grålere, end man venter.

.glass {
  background: rgb(255 255 255 / 0.14);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 16px;
}

Glas ligner kun glas, når der er noget, der er værd at sløre, bag det. På en flad grå side ser panelet bare dunkelt ud. Læg det over et fotografi eller en rig gradient, som glassmorphism forklarer mere dybdegående.

Hvad backdrop-filter-funktioner kan

Egenskaben tager imod de samme funktioner som filter, og du kan kæde dem i én deklaration. De anvendes i rækkefølge, fra venstre mod højre, så blur() og derefter saturate() opfører sig anderledes end omvendt. Den fulde liste findes på MDN.

Ydeevne for backdrop filter

Sløring er en af de dyrere ting, en browser tegner. For at sløre et område skal den læse hver pixel bag elementet, sample naboerne ud til sløringsradius og sammensætte resultatet, og den gentager arbejdet, hver gang noget bag panelet ændrer sig. En fastgjort header over en side, der ruller, tegner sin sløring forfra i hver frame af rulningen.

Prisen skalerer med to tal, du styrer: elementets areal og radius. En header på 64 pixels slørede ved 12px er billig på næsten alt. Et overlay i fuld skærm slørede ved 40px over en video kan tabe frames på en mellemklassetelefon. Det bredere billede står i CSS gradient-ydeevne.

Hvorfor backdrop-filter ikke virker

Når sløringen ser ud til at gøre ingenting, er årsagen næsten altid en af en kort liste.

1. 1

   Tjek, at baggrunden er gennemsigtig

   En ensfarvet background: #fff dækker den slørede baggrund helt. Brug en alfaværdi som rgb(255 255 255 / 0.15).

2. 2

   Tilføj Safari-præfikset

   Safari accepterer først den uprefikserede egenskab fra version 18. Ældre iPhones har stadig brug for -webkit-backdrop-filter.

3. 3

   Led efter en backdrop root over det

   En forælder med filter, opacity under 1, en maske eller sit eget backdrop filter begrænser, hvad barnet kan se. Barnet slører så kun den forælder, hvilket ofte ligner slet ingen sløring.

4. 4

   Pas på fastgjorte børn

   Ligesom filter gør et backdrop filter elementet til den indeholdende blok for fastgjorte og absolut positionerede børn. En fastgjort menu i en glasheader placerer sig i forhold til headeren, ikke vinduet.

5. 5

   Sørg for, at der er noget bag det

   Sløring over en flad farve er usynlig. Rul panelet hen over et billede for at bekræfte, at det virker.

En reserve, der holder teksten læselig

Gennemskinnelige paneler er designet omkring sløringen. Uden den efterlader en hvid fyldning på 14 procent over et travlt foto teksten siddende på selve fotoet, og kontrasten kollapser. Skriv den læselige version først, og opgrader den, hvor browseren kan sløre.

/* Works everywhere: opaque enough to read on its own */
.glass {
  background: rgb(15 23 42 / 0.86);
  color: #f8fafc;
}

/* Upgrade where blur is available */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Respect people who ask for less transparency, where supported */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgb(15 23 42 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

Tjek kontrasten mod det værste sted bag panelet, ikke gennemsnittet. En hvid overskrift over glas, der driver hen over en lys himmel, kan falde langt under forholdene i farvekontrast og tilgængelighed. At gøre mørkere med brightness(0.7) løser det som regel mere pålideligt end at sløre hårdere.

Når du slet ikke har brug for sløring

Meget frosted glass findes kun for at gøre ord læselige over en travl baggrund. Er baggrunden din at designe, løser en roligere den problemet uden renderingspris. En blød gradient med lav kontrast bag et hero behøver intet panel. Se hero-baggrunde til hjemmesider og slørede baggrunde, hvor sløringen bages ind i billedet én gang i stedet for at blive beregnet i hver frame.

Den anden tilgang er, hvordan Gradiently håndterer læsbarhed: en Mark ved, hvor ordene er, og flytter sit roligste område med bedst kontrast bag dem, så du aldrig har brug for en boks eller en sløring til at redde en overskrift.