Funkcia sepia
Funkcia sepia umožňuje
vytvoriť z farebného obrázka sépiu -
čiernobiely obrázok s hnedým
odtieňom. Hodnota 0 znamená,
že obrázok zostane pôvodný.
Hodnota 100% alebo 1 úplne
premení fond na sépiu. Akékoľvek číslo v
uvedenom rozsahu nastavuje aplikáciu sépie lineárne.
Zápornú hodnotu nie je možné zadať.
Predvolená hodnota je 0.
Syntax
selektor {
filter: sepia(číslo);
}
Príklad
Vytvorme z nášho obrázka úplnú sépiu:
<div id="elem"></div>
#elem {
filter: sepia(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Príklad
A teraz znížme aplikáciu sépie
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;
}
:
Príklad
A teraz nastavme v
funkcii sepia hodnotu
rovnú 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;
}
:
Pozri tiež
-
funkcia
blur,
ktorá rozostrí fond -
funkcia
brightness,
ktorá nastaví jas fondu -
funkcia
contrast,
ktorá nastaví kontrast fondu -
funkcia
drop-shadow,
ktorá nastaví tieň fondu -
funkcia
hue-rotate,
ktorá nastaví farebnosť fondu -
funkcia
invert,
ktorá invertuje farby fondu -
funkcia
opacity,
ktorá nastaví priehľadnosť fondu -
vlastnosť
background,
ktorá predstavuje vlastnosť-skratku pre fond -
vlastnosť
background-image,
pomocou ktorej možno bloku nastaviť fondový obrázok -
vlastnosť
filter,
ktorá nastaví štýl pre fond