Sepia-functie
De functie sepia maakt het mogelijk
om een sepia-effect toe te passen op een achtergrondafbeelding -
een zwart-wit afbeelding met een bruine
tint. De waarde 0 betekent
dat de afbeelding origineel blijft.
De waarde 100% of 1 transformeert
de achtergrond volledig naar sepia. Elk getal binnen dit
bereik past sepia lineair toe.
Een negatieve waarde kan niet worden ingesteld.
Standaard is de waarde 0.
Syntaxis
selector {
filter: sepia(getal);
}
Voorbeeld
Laten we van onze afbeelding volledige sepia maken:
<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
Laten we nu de sepia-intensiteit verlagen
naar 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
Laten we nu voor de
functie sepia een waarde
instellen gelijk aan 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;
}
:
Zie ook
-
functie
blur,
die de achtergrond vervaagt -
functie
brightness,
die de helderheid van de achtergrond instelt -
functie
contrast,
die het contrast van de achtergrond instelt -
functie
drop-shadow,
die een schaduw aan de achtergrond toevoegt -
functie
hue-rotate,
die de kleurtoon van de achtergrond aanpast -
functie
invert,
die de kleuren van de achtergrond inverteert -
functie
opacity,
die de transparantie van de achtergrond instelt -
eigenschap
background,
dat een verkorte eigenschap is voor de achtergrond -
eigenschap
background-image,
waarmee een achtergrondafbeelding voor een blok kan worden ingesteld -
eigenschap
filter,
dat de stijl voor de achtergrond instelt