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.