Kazi ya invert
Kazi invert inaruhusu
kubadilisha rangi za picha ya usuli.
Thamani 0 inaashiria
kwamba picha inabaki ya asili. Thamani
100% au 1 inabadilisha kabisa rangi za usuli.
Nambari yoyote iliyo katika
kiwango hii inabadilisha kwa sehemu rangi.
Haiwezekani kuweka thamani hasi.
Kwa default thamani ni 0.
Syntax
kichaguzi {
filter: invert(nambari);
}
Mfano
Wacha tubadilishe rangi za picha yetu hadi
thamani 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;
}
:
Mfano
Sasa wacha tubadilishe kabisa rangi za picha yetu hadi
thamani 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;
}
:
Mfano
Sasa wacha tuweke katika
kazi invert thamani
sawa na 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;
}
:
Angalia pia
-
kazi
blur,
ambayo inapofua usuli -
kazi
brightness,
ambayo huweka mwangaza wa usuli -
kazi
contrast,
ambayo huweka utofautishaji wa usuli -
kazi
drop-shadow,
ambayo huweka kivuli cha usuli -
kazi
hue-rotate,
ambayo huweka hue ya usuli -
kazi
opacity,
ambayo huweka uwazi wa usuli -
kazi
sepia,
ambayo hubadilisha usuli kuwa sepia -
sifa
background,
inayowakilisha sifa iliyofupishwa kwa usuli -
sifa
background-image,
ambayo kwa kutumia block inaweza kupewa picha ya usuli -
sifa
filter,
ambayo huweka mtindo wa usuli