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