Kazi ya opacity
Kazi opacity inaruhusu
kubadilisha uwazi wa picha ya asili.
Thamani 100% au 1 inaacha
picha uwazi wake asili.
Thamani 0 inaashiria,
kwamba picha itakuwa uwazi kabisa.
Nambari yoyote iliyoko katika
kiwango hiki huweka uwazi wa sehemu ya asili.
Haiwezekani kuweka thamani hasi.
Kwa default thamani ni 1.
Kioweko
kichagua {
filter: opacity(nambari);
}
Mfano
Wacha tuweke uwazi wa picha yetu
kwa 50%:
<div id="elem"></div>
#elem {
filter: opacity(50%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Mfano
Sasa wacha tuweke uwazi
wa 100%:
<div id="elem"></div>
#elem {
filter: opacity(100%);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Mfano
Sasa wacha tuweke kwenye
kazi opacity thamani
sawa na 0:
<div id="elem"></div>
#elem {
filter: opacity(0);
background: url("bg.png") center / cover no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Angalia pia
-
kazi
blur,
ambayo inapofua asili -
kazi
brightness,
ambayo huweka mwangaza wa asili -
kazi
contrast,
ambayo huweka utofautishaji wa asili -
kazi
drop-shadow,
ambayo huweka kivuli cha asili -
kazi
hue-rotate,
ambayo huweka rangi ya asili -
kazi
invert,
ambayo inabadilisha upande rangi za asili -
kazi
sepia,
ambayo inabadilisha asili kuwa sepia -
sifa
background,
inayowakilisha sifa iliyofupishwa kwa asili -
sifa
background-image,
ambayo kwa msaada wake kizuizi chaweza kupewa picha ya asili