Vlastnost filter

Vlastnost filter nastavuje obrázku na pozadí určitý umělecký styl nebo filtr. Vlastnost může přijímat jako hodnoty názvy uměleckých stylů, vytvořených funkcí filter nebo none (zrušení zvoleného filtru).

Syntaxe

selektor {
	filter: umělecký styl nebo none;
}

Příklad

Nastavme našemu obrázku černobílý filtr a při najetí myší jej zrušme:

<div id="elem"></div>

#elem {
	filter: grayscale(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
#elem:hover {
	filter: none;
}

Viz také

vlastnost background,
která představuje zkratkovou vlastnost pro pozadí
funkce blur,
která rozostřuje pozadí
funkce brightness,
která nastavuje jas pozadí
funkce contrast,
která nastavuje kontrastnost pozadí
funkce drop-shadow,
která nastavuje stín pozadí
funkce hue-rotate,
která nastavuje barevnost pozadí
funkce invert,
která invertuje barvy pozadí
funkce opacity,
která nastavuje průhlednost pozadí
funkce sepia,
která převádí pozadí do sépie