Właściwość CSS backdrop-filter

Czas czytania: < 1 minut

Właściwość CSS backdrop-filter należy do grupy filtrów z ich pomocą możemy zmienić fragment koloru tła mieszczący się pod elementem blokowym np. <div>, <span>, <p>.

Jak działa backdrop-filter?

Właściwość ta działa analogicznie do innych z tej grupy. Przy czym w tym wypadku używa się jej głównie w sytuacji kiedy na obrazkowym tle chcemy dodać tekst. Aby ten tekst się nie zlał z grafiką wato dodać pod niego tło. Takie tło zwykle jest przezroczyste by wychodził z pod niego obrazek. Jednak nie zawsze tak musi być. Z pomocą backdrop-filter tło pod tekstem może być przedstawiane w inny sposób.

Jakie wartości przyjmuje backdrop-filter?

.obekt{
  backdrop-filter: blur(15px);
}
  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() – (dla obrazów SVG)

Działanie w praktyce

Poniżej możecie zobaczyć przykład działania właściwości backdrop-filter

See the Pen
Untitled
by Aura (@Julka85)
on CodePen.0

Ograniczenia

desktopmobile
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung InternetWebView Android
backdrop-filterFull support Chrome76 Toggle historyFull support Edge 17 Toggle historyFull support Firefox103 Toggle historyFull support Opera 63 Toggle historyFull support Safari 9 prefix Toggle historyFull support Chrome Android76 Toggle historyFull support Firefox for Android 103 Toggle historyFull support Opera Android54 Toggle historyFull support Safari on iOS 9 prefix Toggle historyFull support Samsung Internet12.0 Toggle historyFull support WebView Android 76 Toggle history

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

*Wyrażam zgodę na przechowywanie i przetwarzanie moich danych na potrzeby umieszczenia mojego komentarza.
*W przypadku gdy treść komentarza narusza prawo Polskie i dobro oraz uczucia innych osób Administrator, zachowuje prawo nie publikowania go