Sepia-funksie

Die funksie sepia laat jou 'n sepia van die agtergrondbeeld maak - 'n swart-en-wit beeld met 'n bruin skakering. Die waarde 0 dui aan dat die beeld oorspronklik sal bly. Die waarde 100% of 1 verander die agtergrond heeltemal in sepia. Enige getal wat in hierdie reeks geleë is, pas sepia lineêr toe. 'n Negatiewe waarde kan nie gestel word nie. Standaard is die waarde gelyk aan 0.

Sintaksis

selektor {
	filter: sepia(getal);
}

Voorbeeld

Kom ons maak van ons beeld 'n volledige 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;
}

Voorbeeld

En nou, laat ons die toepassing van sepia verminder na 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

En nou, laat ons in die funksie sepia 'n waarde gelyk aan 0 stel:

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

#elem {
	filter: sepia(0);
	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 brightness,
wat die helderheid vir die agtergrond stel
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 kleur vir die agtergrond stel
die funksie invert,
wat die agtergrondkleure omkeer
die funksie opacity,
wat die deursigtigheid vir die agtergrond stel
die eienskap background,
wat 'n verkorte eienskap vir die agtergrond is
die eienskap background-image,
waarmee jy 'n agtergrondprent vir 'n blok kan stel
die eienskap filter,
wat die styl vir die agtergrond stel