Funktionen brightness

Funktionen brightness giver mulighed for at ændre lysstyrken på baggrundsbilledet. Den oprindelige lysstyrke på baggrunden bestemmes af værdien 100% eller 1, ved at reducere dem falder lysstyrken på billedet. Derfor, når værdien øges over 100%, øges lysstyrken. Negative værdier anvendes ikke, og en tom værdi forstås automatisk som 1.

Syntaks

selektor {
	filter: brightness(tal);
}

Eksempel

Lad os indstille lysstyrken på vores billede 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 lad os nu øge lysstyrken på billedet 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

Lad os indstille den oprindelige lysstyrke for vores billede:

<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å

funktionen blur,
som slører baggrunden
funktionen contrast,
som indstiller kontrasten på baggrunden
funktionen drop-shadow,
som tilføjer skygge til baggrunden
funktionen hue-rotate,
som indstiller farvetonen på baggrunden
funktionen invert,
som inverterer baggrundens farver
funktionen opacity,
som indstiller gennemsigtigheden på baggrunden
funktionen sepia,
som omdanner baggrunden til sepia
egenskaben background,
som er en sammentrækningsegenskab for baggrunden
egenskaben background-image,
som kan bruges til at tildele et baggrundsbillede til et element
egenskaben filter,
som definerer stilen for baggrunden