Właściwość CSS backdrop-filter należy do grupy filtrów z ich pomocą możemy wpływać na rozmycie tła w elemencie blokowym np. <div>, <span>, <p>. Właściwość ta doskonale się sprawdzi w sytuacji kiedy chcemy umieścić tekst na grafice.
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 np. chcemy umieścić na obrazku jakiś tekst i zależy nam na tym by był on w miarę czytelny. Zazwyczaj by taki tekst nie zlał z grafiką dodaje się tło. Takie tło zwykle jest przezroczyste by wychodził z pod niego obrazek – co może różnie wpływać na możliwość odczytania tekstu. 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ą.