brightness-funksie

Die funksie brightness laat jou toe om die helderheid van die agtergrondbeeld te verander. Die oorspronklike helderheid van die agtergrond word bepaal deur die waarde 100% of 1, wanneer dit verminder word, verminder die helderheid van die beeld ook. Dienooreenkomstig, wanneer die waarde verhoog word tot meer as 100% neem die helderheid toe. Negatiewe waardes word nie toegepas nie, en 'n leë waarde word outomaties waargeneem as 1.

Sintaksis

selekteerder {
	filter: brightness(nommer);
}

Voorbeeld

Laat ons die helderheid van ons beeld stel op 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;
}

Voorbeeld

En laat ons nou die helderheid van die beeld verhoog 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;
}

Voorbeeld

Laat ons die oorspronklike helderheid stel vir ons beeld:

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

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

Sien ook

die funksie blur,
wat die agtergrond vervaag
die funksie contrast,
wat die kontras vir die agtergrond stel
die funksie drop-shadow,
wat 'n skaduwee vir die agtergrond stel
die funksie hue-rotate,
wat die kleurtoon vir die agtergrond stel
die funksie invert,
wat die agtergrondkleure inverteer
die funksie opacity,
wat die deursigtigheid vir die agtergrond stel
die funksie sepia,
wat die agtergrond in sepia omskakel
die eienskap background,
wat 'n verkorte eienskap vir die agtergrond is
die eienskap background-image,
waarmee jy 'n agtergrondbeeld vir 'n blok kan stel
die eienskap filter,
wat die styl vir die agtergrond stel