invert-funktio

invert-funktio mahdollistaa taustakuvan värien kääntämisen. Arvo 0 tarkoittaa, että kuva pysyy alkuperäisenä. Arvo 100% tai 1 kääntää taustan värit täysin. Mikä tahansa tällä alueella oleva luku kääntää värit osittain. Negatiivista arvoa ei voi asettaa. Oletusarvo on 0.

Syntaksi

valitsija {
	filter: invert(luku);
}

Esimerkki

Käännetään kuvamme värit arvoon 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;
}

Esimerkki

Käännetään nyt kuvamme värit arvoon 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;
}

Esimerkki

Asetetaan nyt invert-funktiolle arvo 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;
}

Katso myös

blur-funktio,
joka sumentaa taustan
brightness-funktio,
joka asettaa taustan kirkkauden
contrast-funktio,
joka asettaa taustan kontrastin
drop-shadow-funktio,
joka asettaa taustalle varjon
hue-rotate-funktio,
joka asettaa taustan värisävykierron
opacity-funktio,
joka asettaa taustan läpinäkyvyyden
sepia-funktio,
joka muuntaa taustan sepiaksi
background-ominaisuus,
joka on lyhennysominaisuus taustalle
background-image-ominaisuus,
jolla elementille voidaan asettaa taustakuva
filter-ominaisuus,
joka asettaa tyylin taustalle