Funkce brightness

Funkce brightness umožňuje upravit jas obrázku na pozadí. Původní jas pozadí je určen hodnotou 100% nebo 1, při jejich snížení se sníží i jas obrázku. Naopak při zvýšení hodnoty nad 100% se jas zvýší. Záporné hodnoty se nepoužívají, a prázdná hodnota je automaticky považována za 1.

Syntaxe

selektor {
	filter: brightness(číslo);
}

Příklad

Nastavme našemu obrázku jas na 20%:

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

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

Příklad

A nyní zvýšíme jas obrázku na 120%:

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

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

Příklad

Nastavme našemu obrázku původní jas:

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

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

Viz také

funkce blur,
která rozostřuje pozadí
funkce contrast,
která nastavuje kontrast pozadí
funkce drop-shadow,
která přidává 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
vlastnost background,
která je zkratkou pro nastavení pozadí
vlastnost background-image,
pomocí které lze prvku nastavit obrázek na pozadí
vlastnost filter,
která nastavuje styl pro pozadí