Funktionen invert
Funktionen invert låter dig
invertera färgerna i en bakgrundsbild.
Värdet 0 betyder
att bilden förblir oförändrad. Värdet
100% eller 1 inverterar bakgrundsfärgerna helt.
Alla tal inom
detta intervall inverterar färgerna delvis.
Negativa värden kan inte anges.
Standardvärdet är 0.
Syntax
selektor {
filter: invert(tal);
}
Exempel
Låt oss invertera färgerna i vår bild till
värdet 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;
}
:
Exempel
Och låt oss nu invertera färgerna i vår bild till
värdet 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;
}
:
Exempel
Och låt oss nu ange i
funktionen invert ett värde
lika med 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;
}
:
Se även
-
funktionen
blur,
som oskärper bakgrunden -
funktionen
brightness,
som ställer in ljusstyrkan för bakgrunden -
funktionen
contrast,
som ställer in kontrasten för bakgrunden -
funktionen
drop-shadow,
som lägger till en skugga på bakgrunden -
funktionen
hue-rotate,
som ställer in nyansförskjutning för bakgrunden -
funktionen
opacity,
som ställer in opaciteten för bakgrunden -
funktionen
sepia,
som omvandlar bakgrunden till sepia -
egenskapen
background,
som är en genvägsegenskap för bakgrund -
egenskapen
background-image,
som används för att sätta en bakgrundsbild på ett element -
egenskapen
filter,
som applicerar filtereffekter på bakgrunden