Sepia funkcija

Funkcija sepia leidžia paversti fono paveikslėlį sepija - juoda-baltu paveikslėliu su rudos atspalviu. Reikšmė 0 reiškia, kad paveikslėlis liks pradinis. Reikšmė 100% arba 1 visiškai paverčia foną į sepiją. Bet koks skaičius esantis šiame diapazone nurodo sepijos taikymą tiesiškai. Neigiamą reikšmę nurodyti negalima. Pagal nutylėjimą reikšmė yra 0.

Sintaksė

selektorius {
	filter: sepia(skaičius);
}

Pavyzdys

Padarykime iš mūsų paveikslėlio pilną sepiją:

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

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

Pavyzdys

Dabar sumainkime sepijos taikymą iki 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;
}

Pavyzdys

Dabar nustatykime funkcijoje sepia reikšmę lygią 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;
}

Taip pat žiūrėkite

funkcija blur,
kuri išblunka foną
funkcija brightness,
kuri nustato fono ryškumą
funkcija contrast,
kuri nustato fono kontrastą
funkcija drop-shadow,
kuri nustato fono šešėlį
funkcija hue-rotate,
kuri nustato fono atspalvį
funkcija invert,
kuri invertuoja fono spalvas
funkcija opacity,
kuri nustato fono permatomumą
savybė background,
kuri yra sutrumpinta savybė fonui
savybė background-image,
kuria blokui galima nustatyti fono paveikslėlį
savybė filter,
kuri nustato stilių fonui