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>.
Co znajdziesz w tym wpisie
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
Ograniczenia
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | |
backdrop-filter | Full support Chrome76 Toggle history | Full support Edge 17 Toggle history | Full support Firefox103 Toggle history | Full support Opera 63 Toggle history | Full support Safari 9 prefix Toggle history | Full support Chrome Android76 Toggle history | Full support Firefox for Android 103 Toggle history | Full support Opera Android | Full support Safari on iOS 9 prefix Toggle history | Full support Samsung Internet | Full support WebView Android 76 Toggle history |
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.