Kubainisha Rangi Kupitia rgba katika CSS
Licha ya muundo rgb kuna muundo
rgba, ambao hufanya kazi kwa njia ile ile,
lakini kwa kigezo cha nne huruhusu
kubainisha uwazi wa rangi. Kigezo hiki
hukubali maadili ya sehemu kutoka 0 hadi
1. Wakati huo huo, kitengo kinalingana na
utoashi kamili, na sifuri -
uwazi kamili.
Tuangalie kwa mifano.
Mfano
Kwanza, tufanye block isiyo na uwazi kama hii:
<div id="parent">
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
</div>
#parent {
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
padding: 30px;
}
#elem {
width: 300px;
height: 200px;
border: 20px solid red;
padding: 10px;
font-size: 50px;
font-weight: bold;
color: rgba(255, 0, 0); /* rangi nyekundu */
}
:
Mfano
Sasa tuongeze uwazi wa maandishi:
<div id="parent">
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
</div>
#parent {
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
padding: 30px;
}
#elem {
width: 300px;
height: 200px;
border: 20px solid red;
padding: 10px;
font-size: 50px;
font-weight: bold;
color: rgba(255, 0, 0, 0.5); /* nyekundu yenye uwazi */
}
:
Mfano
Sasa tufanye mipaka iwe yenye uwazi:
<div id="parent">
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
</div>
#parent {
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
padding: 30px;
}
#elem {
width: 300px;
height: 200px;
border: 20px solid rgba(255, 0, 0, 0.5); /* nyekundu yenye uwazi */
padding: 10px;
font-size: 50px;
font-weight: bold;
color: red;
}
:
Mfano
Sasa tufanye mandharinyuma yawe yenye uwazi:
<div id="parent">
<div id="elem">
Lorem ipsum dolor sit amet.
</div>
</div>
#parent {
background-image: url("bg.png");
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
padding: 30px;
}
#elem {
width: 300px;
height: 200px;
border: 20px solid red;
background-color: rgba(0, 0, 0, 0.4); /* nyeusi yenye uwazi */
padding: 10px;
font-size: 50px;
font-weight: bold;
color: red;
}
:
Kazi za Vitendo
Bainisha rangi nyekundu yenye uwazi kwa aya.
Bainisha rangi ya kijani yenye uwazi kwa mandharinyuma.
Bainisha rangi ya samawati yenye uwazi kwa mpaka.