Funksjonen brightness

Funksjonen brightness lar deg endre lysstyrken på bakgrunnsbildet. Den opprinnelige lysstyrken på bakgrunnen bestemmes av verdien 100% eller 1, ved å redusere disse reduseres også lysstyrken på bildet. Tilsvarende øker lysstyrken når verdien økes over 100%. Negative verdier brukes ikke, og en tom verdi blir automatisk oppfattet som 1.

Syntaks

velger {
	filter: brightness(tall);
}

Eksempel

La oss sette lysstyrken på bildet vårt til 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;
}

Eksempel

Og la oss nå øke lysstyrken på bildet til 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;
}

Eksempel

La oss sette den opprinnelige lysstyrken for bildet vårt:

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

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

Se også

funksjonen blur,
som uskarpgjør bakgrunnen
funksjonen contrast,
som setter kontrasten på bakgrunnen
funksjonen drop-shadow,
som setter skygge på bakgrunnen
funksjonen hue-rotate,
som setter fargetone på bakgrunnen
funksjonen invert,
som inverterer bakgrunnens farger
funksjonen opacity,
som setter gjennomsiktighet på bakgrunnen
funksjonen sepia,
som konverterer bakgrunnen til sepia
egenskapen background,
som er en forkortelse for bakgrunn
egenskapen background-image,
som lar deg sette bakgrunnsbilde på et element
egenskapen filter,
som setter stil for bakgrunnen