Sepia-functie

De functie sepia maakt het mogelijk om een sepia-effect toe te passen op een achtergrondafbeelding - een zwart-wit afbeelding met een bruine tint. De waarde 0 betekent dat de afbeelding origineel blijft. De waarde 100% of 1 transformeert de achtergrond volledig naar sepia. Elk getal binnen dit bereik past sepia lineair toe. Een negatieve waarde kan niet worden ingesteld. Standaard is de waarde 0.

Syntaxis

selector {
	filter: sepia(getal);
}

Voorbeeld

Laten we van onze afbeelding volledige sepia maken:

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

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

Voorbeeld

Laten we nu de sepia-intensiteit verlagen naar 50%:

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

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

Voorbeeld

Laten we nu voor de functie sepia een waarde instellen gelijk aan 0:

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

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

Zie ook

functie blur,
die de achtergrond vervaagt
functie brightness,
die de helderheid van de achtergrond instelt
functie contrast,
die het contrast van de achtergrond instelt
functie drop-shadow,
die een schaduw aan de achtergrond toevoegt
functie hue-rotate,
die de kleurtoon van de achtergrond aanpast
functie invert,
die de kleuren van de achtergrond inverteert
functie opacity,
die de transparantie van de achtergrond instelt
eigenschap background,
dat een verkorte eigenschap is voor de achtergrond
eigenschap background-image,
waarmee een achtergrondafbeelding voor een blok kan worden ingesteld
eigenschap filter,
dat de stijl voor de achtergrond instelt