Functie invert
De functie invert maakt het mogelijk
om kleuren in de achtergrondafbeelding om te keren.
De waarde 0 geeft aan
dat de afbeelding origineel blijft. De waarde
100% of 1 keert de achtergrondkleuren volledig om.
Elk getal binnen dit
bereik keert de kleuren gedeeltelijk om.
Een negatieve waarde kan niet worden ingesteld.
Standaard is de waarde 0.
Syntaxis
selector {
filter: invert(getal);
}
Voorbeeld
Laten we de kleuren van onze afbeelding omkeren tot
een waarde van 50%:
<div id="elem"></div>
#elem {
filter: invert(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Voorbeeld
Laten we nu de kleuren van onze afbeelding omkeren tot
een waarde van 100%:
<div id="elem"></div>
#elem {
filter: invert(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Voorbeeld
Laten we nu in de
functie invert een waarde
instellen gelijk aan 0:
<div id="elem"></div>
#elem {
filter: invert(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 voor de achtergrond instelt -
functie
hue-rotate,
die de kleurtoon van de achtergrond instelt -
functie
opacity,
die de transparantie van de achtergrond instelt -
functie
sepia,
die de achtergrond omzet in sepiakleur -
eigenschap
background,
dat een verkorte eigenschap voor de achtergrond is -
eigenschap
background-image,
waarmee een achtergrondafbeelding voor een blok kan worden ingesteld -
eigenschap
filter,
die de stijl voor de achtergrond instelt