CSS backdrop-filter

CSS filtry se těší dobré podpoře napříč prohlížeči.

Zápis

Vlastnost backdrop-filter slouží pro aplikování filtrů na pozadí elementu, bez ovlivnění samotného obsahu. Zápis je úplně stejný jako u filter:

element {
  backdrop-filter: nazevFiltru(parametr);
}

Aby se efekt mohl projevit, musí být element průhledný – je už jedno jestli pomocí opacity nebo pozadí zapsaného např. průhlednou RGBA barvou, případně to funguje i úplně bez pozadí.

Samostatná živá ukázka

Podpora

Podpora není tak dobrá jako u obyčejného filteru.

Nefunguje v IE 11 a Firefoxu (nejspíš začne fungovat v blízké budoucnosti).

Využití

Může se zdát, že jde totéž co vlastností backdrop-filter zajistit obyčejným filterem. To je do jisté míry pravda, ale backdrop-filter přináší zjednodušení – odpadá nutnost vytvářet speciální elementy pro aplikování filtru na požadované místo stránky.

U klasického filtru je často problém v tom, že rozmazává i obsah. Bylo tak dřív nutné mít specifickou strukturu HTML kódu.

Odkazy

• MDN: backdrop-filter