Funkce invert
Funkce invert umožňuje
invertovat barvy v obrázku na pozadí.
Hodnota 0 znamená,
že obrázek zůstane původní. Hodnota
100% nebo 1 úplně invertuje barvy pozadí.
Jakékoliv číslo v
tomto rozsahu částečně invertuje barvy.
Záporná hodnota nelze zadat.
Výchozí hodnota je 0.
Syntaxe
selektor {
filter: invert(číslo);
}
Příklad
Invertujme barvy našeho obrázku na
hodnotu 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;
}
:
Příklad
Nyní invertujme barvy našeho obrázku na
hodnotu 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;
}
:
Příklad
Nyní nastavme v
funkci invert hodnotu
rovnou 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;
}
:
Viz také
-
funkce
blur,
která rozostřuje pozadí -
funkce
brightness,
která nastavuje jas pozadí -
funkce
contrast,
která nastavuje kontrast pozadí -
funkce
drop-shadow,
která nastavuje stín pozadí -
funkce
hue-rotate,
která nastavuje barevný tón pozadí -
funkce
opacity,
která nastavuje průhlednost pozadí -
funkce
sepia,
která převádí pozadí na sépii -
vlastnost
background,
která je zkratkovou vlastností pro pozadí -
vlastnost
background-image,
pomocí které lze bloku nastavit obrázek na pozadí -
vlastnost
filter,
která nastavuje styl pro pozadí