Funksie invert

Die funksie invert laat toe om kleure in die agtergrondbeeld om te keer. Die waarde 0 dui aan dat die beeld oorspronklik bly. Die waarde 100% of 1 keer die agtergrondkleure heeltemal om. Enige getal geleë in hierdie reeks keer die kleure gedeeltelik om. 'n Negatiewe waarde kan nie toegeken word nie. By verstek is die waarde gelyk aan 0.

Sintaksis

selektor {
	filter: invert(getal);
}

Voorbeeld

Kom ons keer die kleure van ons beeld om tot die waarde 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

En nou, laat ons die kleure van ons beeld omkeer tot die waarde 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

En nou, laat ons in die funksie invert 'n waarde gelyk aan 0 toeken:

<div id="elem"></div>

#elem {
	filter: invert(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Sien ook

die funksie blur,
wat die agtergrond vervaag
die funksie brightness,
wat die helderheid van die agtergrond bepaal
die funksie contrast,
wat die kontras van die agtergrond bepaal
die funksie drop-shadow,
wat 'n skaduwee vir die agtergrond bepaal
die funksie hue-rotate,
wat die kleurtint van die agtergrond bepaal
die funksie opacity,
wat die deursigtigheid van die agtergrond bepaal
die funksie sepia,
wat die agtergrond in sepia omskep
die eienskap background,
wat 'n verkorte eienskap vir die agtergrond is
die eienskap background-image,
waarmee 'n blok 'n agtergrondprent kan kry
die eienskap filter,
wat die styl vir die agtergrond bepaal