A brightness függvény

A brightness függvény lehetővé teszi a háttérkép fényerejének módosítását. A háttér eredeti fényerejét a 100% vagy 1 érték határozza meg. Ezek csökkentésével a kép fényereje is csökken. Ennek megfelelően, ha az érték 100% fölé emelkedik, a fényerő növekszik. A negatív értékek nem alkalmazhatók, az üres értéket pedig automatikusan 1 értékként értelmezi a rendszer.

Szintaxis

selector {
	filter: brightness(szám);
}

Példa

Állítsuk be a kép fényerejét 20%-ra:

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

Most növeljük a kép fényerejét 120%-ra:

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

Állítsuk vissza a kép eredeti fényerejét:

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

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

Lásd még

a blur függvény,
amely elhomályosítja a hátteret
a contrast függvény,
amely beállítja a háttér kontrasztját
a drop-shadow függvény,
amely árnyékot ad a hátterhez
a hue-rotate függvény,
amely beállítja a háttér színárnyalatát
a invert függvény,
amely megfordítja a háttér színeit
a opacity függvény,
amely beállítja a háttér átlátszóságát
a sepia függvény,
amely szépia effektust ad a hátternek
a background tulajdonság,
ami egy rövidített tulajdonság a háttérhez
a background-image tulajdonság,
amellyel háttérképet lehet beállítani egy blokkhoz
a filter tulajdonság,
amely stílust határoz meg a háttérhez