Filter pozadia - Triky CSS

Anonim

backdrop-filterNehnuteľnosť v CSS slúžia k aplikovať efekty filtra ( grayscale, contrast, blur, atď) do pozadia / pozadia prvku. To backdrop-filtermá rovnaký efekt ako filtervlastnosť, až na to, že efekty filtra sa aplikujú iba na pozadie a namiesto na obsah elementu.

Klasický príklad:

Filtrované pozadia bez filtra pozadia

Predtým backdrop-filterbol jediný spôsob, ako pridať filtrované pozadie, pridať samostatný prvok „pozadia“, umiestniť ho za element (y) v popredí a filtrovať ho takto:

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

Toto backdrop-filtervlastníctvo umožňuje vylúčiť tento ďalší prvok „pozadia“ a priamo použiť pozadie na filtre:

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

V čase písania tohto článku backdrop-filterje súčasťou redakčnej koncepcie filtračných efektov modulu 2 a nie je oficiálne súčasťou žiadnej špecifikácie. Podpora prehľadávača je momentálne obmedzená (pozrite si časť „Podpora prehľadávača“ nižšie).

Syntax

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

môže byť ktorákoľvek z nasledujúcich možností:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (na použitie filtrov SVG)

Na pozadie môžete použiť viacero s, napríklad:

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

Prijateľné hodnoty pre každú z funkcií filtra nájdete v pracovnom koncepte modulu efektov filtra W3C.

Príklad

Komplexný pohľad na funkcie filtra a šikovné spôsoby ich spoločného použitia nájdete v filterpoložke almanachu na CSS-Tricks.

Nasledujúce pero je vidlicové z príkladu v článku Robina Rendleho, ktorý sa venuje skúmaniu backdrop-filter.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
76 Nie Nie 17 9 *

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 Nie 81 9,0 - 9,2 *

Súvisiace

  • filter

Zdroje

  • Vlastnosť filtra pozadia od Robina Rendleho
  • Položka MDN na filtri kulisy