Sepia-funksjonen

Funksjonen sepia lar deg gjøre et bakgrunnsbilde til sepia - et svart-hvitt bilde med en brun nyanse. Verdien 0 betyr at bildet forblir uendret. Verdien 100% eller 1 gjør bakgrunnen helt sepia. Ethvert tall innenfor dette området bruker sepia lineært. Negativ verdi kan ikke brukes. Standardverdien er 0.

Syntaks

velger {
	filter: sepia(tall);
}

Eksempel

La oss gjøre bildet vårt helt sepia:

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

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

Eksempel

La oss nå redusere sepia-effekten til 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;
}

Eksempel

La oss nå sette funksjonen sepia til verdien 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;
}

Se også

funksjonen blur,
som uskarpgjør bakgrunnen
funksjonen brightness,
som setter lysstyrke på bakgrunnen
funksjonen contrast,
som setter kontrast på bakgrunnen
funksjonen drop-shadow,
som setter skygge på bakgrunnen
funksjonen hue-rotate,
som setter fargetone på bakgrunnen
funksjonen invert,
som inverterer bakgrunnsfargene
funksjonen opacity,
som setter gjennomsiktighet på bakgrunnen
egenskapen background,
som er en snarvei for bakgrunn
egenskapen background-image,
som brukes til å sette bakgrunnsbilde på et element
egenskapen filter,
som setter stil for bakgrunnen