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