Pozadina-filter - CSS-trikovi

Anonim

backdrop-filterNekretnina u CSS se koristi za primjenu efekte filtra ( grayscale, contrast, blur, itd) u pozadinu / pozadina elementa. backdrop-filterIma isti učinak kao i filterimovinu, osim što su filter efekti primijeniti samo na pozadini i umjesto da se sadržaj elementa.

Klasični primjer:

Filtrirane pozadine bez pozadine-filtra

Prije backdrop-filterje jedini način dodavanja filtrirane pozadine bio dodavanje zasebnog elementa "background", postavljanje iza elemenata u prvom planu i filtriranje na sljedeći način:

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

backdrop-filterSvojstvo omogućuje eliminirati ovaj dodatni „background” element i primijeniti filtre za pozadina izravno:

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

U vrijeme pisanja ovog članka, backdrop-filterdio je Nacrta uređivača modula 2 za efekte filtra i službeno nije dio bilo koje specifikacije. Podrška za preglednik trenutno je ograničena (pogledajte "Podrška za preglednik" u nastavku).

Sintaksa

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

može biti bilo što od sljedećeg:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (za primjenu SVG filtara)

Na pozadinu možete primijeniti više s, na primjer:

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

Pogledajte radni nacrt modula efekata filtra W3C za prihvatljive vrijednosti za svaku od funkcija filtra.

Primjer

Za sveobuhvatan pogled na funkcije filtra i sjajne načine njihove zajedničke uporabe, pogledajte filterunos u almanah na CSS-trikovima.

Sljedeća je olovka rastavljena iz primjera u istraživanju članka Robina Rendlea backdrop-filter.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
76 Ne Ne 17 9 *

Mobitel / tablet

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

Povezano

  • filter

Resursi

  • Svojstvo filtra pozadine Robin Rendle
  • MDN unos na pozadini-filtru