Właściwość CSS backdrop-filter

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