Taustfilter - CSS-trikid

Anonim

backdrop-filterVara CSS kasutatakse filtrit mõju ( grayscale, contrast, blurjne) taustal / taustaks elemendi. Sellel backdrop-filteron sama efekt kui filteratribuudil, välja arvatud see, et filtriefekte rakendatakse ainult taustale ja elemendi sisule.

Klassikaline näide:

Filtreeritud taustad ilma taustafiltrita

Enne backdrop-filteroli filtreeritud tausta lisamise ainus viis lisada eraldi taust "element", asetada see esiplaani elemendi (de) taha ja filtreerida nii:

 
.background ( filter: blur(4px); position: absolute; width: 100%; height: 100%; )

backdrop-filterVara võimaldab kõrvaldada see ekstra "taust" element ja rakendada filtreid taustal otse:

.foreground ( backdrop-filter: blur(10px); ) /* No .wrapper needed! */

Kirjutamise ajal backdrop-filteron see osa Filter Effects Module 2 toimetaja mustandist ega kuulu ametlikult ühegi spetsifikatsiooni hulka. Brauseritugi on praegu piiratud (vt allpool jaotist „Brauseritugi”).

Süntaks

.element ( backdrop-filter: ()* | none )

võib olla üks järgmistest:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (SVG-filtrite rakendamiseks)

Saate taustale rakendada mitu s, näiteks:

.element ( backdrop-filter: grayscale(0.5) opacity(0.8) /*… and on and on… */; )

Kõigi filtrifunktsioonide jaoks vastuvõetavad väärtused leiate W3C filtriefektide mooduli tööjoonisest.

Näide

Filtrifunktsioonide ja vahva kasutamise viiside tervikliku ülevaate saamiseks vaadake filteralmanahhikirjet CSS-Tricksi kohta.

Järgmine pliiats on hargnenud Robin Rendle uuriva artikli näitest backdrop-filter.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
76 Ei Ei 17 9 *

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
88 Ei 81 9,0–9,2 *

Seotud

  • filter

Ressursid

  • Robin Rendle'i taustafiltri omadus
  • MDN-kirje taustfiltril