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 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