Sepia függvény

A sepia függvény lehetővé teszi a háttérkép szépiává alakítását - egy fekete-fehér képet barna árnyalattal. A 0 érték azt jelenti, hogy a kép eredeti marad. A 100% vagy 1 érték teljesen szépiává alakítja a hátteret. Az adott tartományban található bármely szám a szépia alkalmazását lineárisan állítja be. Negatív érték nem adható meg. Alapértelmezetten az érték 0.

Szintaxis

szelektor {
	filter: sepia(szám);
}

Példa

Alakítsuk a képünket teljes szépiává:

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

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

Példa

Most csökkentsük a szépia alkalmazását 50%-ra:

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

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

Példa

Most állítsuk be a sepia függvény értékét 0-ra:

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

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

Lásd még

a blur függvény,
amely elmossa a hátteret
a brightness függvény,
amely beállítja a háttér fényerejét
a contrast függvény,
amely beállítja a háttér kontrasztját
a drop-shadow függvény,
amely árnyékot ad a háttérhez
a hue-rotate függvény,
amely beállítja a háttér színárnyalatát
a invert függvény,
amely megfordítja a háttér színeit
a opacity függvény,
amely beállítja a háttér átlátszóságát
a background tulajdonság,
amely egy rövidített tulajdonság a háttérhez
a background-image tulajdonság,
amellyel háttérképet lehet beállítani egy blokkhoz
a filter tulajdonság,
amely stílust állít be a háttérhez