Ранггузории ранғ тавассути rgba дар CSS

Ғайр аз формати rgb формати rgba мавҷуд аст, ки ба ҳамин тавр кор мекунад, аммо бо параметри чорум имкон медиҳад, ки ба ранғ нимшаффофӣ дода шавад. Ин параметр қиматҳои касриро аз 0 то 1 қабул мекунад. Дар ин ҳол воҳид мувофиқ аст ба пурра ногаҳдорӣ, ва сифр - ба пурра шаффофӣ.

Биёед ба мисолҳо нигарем.

Мисол

Барои оғоз чунин блоки ногаҳдор созем:

<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); /* ранги сурх */
}

Мисол

Акнун ба матн нимшаффофӣ илова кунем:

<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); /* сурхи нимшаффоф */
}

Мисол

Ва акнун ҳудуди нимшаффоф созем:

<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); /* сурхи нимшаффоф */
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: red;
}

Мисол

Ва акнун заминаи нимшаффоф созем:

<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); /* сиёҳи нимшаффоф */
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: red;
}

Масъалаҳои амалӣ

Ба абзасҳо ранги сурхи нимшаффоф таъин кунед.

Ба замина ранги сабзи нимшаффоф таъин кунед.

Ба ҳудуд ранги кабудобӣ (голубой) нимшаффоф таъин кунед.