Definirea culorii prin rgba în CSS

Pe lângă formatul rgb, există formatul rgba, care funcționează în mod similar, dar permite ca al patrulea parametru să definească transparența culorii. Acest parametru acceptă valori fracționale de la 0 la 1. În acest caz, unu corespunde opacității complete, iar zero - transparenței complete.

Să ne uităm la exemple.

Exemplul

Pentru început, să facem un bloc opac astfel:

<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); /* culoare roșie */
}

Exemplul

Acum să adăugăm transparență textului:

<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); /* roșu semitransparent */
}

Exemplul

Iar acum să facem bordură semitransparentă:

<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); /* roșu semitransparent */
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: red;
}

Exemplul

Iar acum să facem fundal semitransparent:

<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); /* negru semitransparent */
	padding: 10px;
	font-size: 50px;
	font-weight: bold;
	color: red;
}

Probleme practice

Definiți pentru paragrafe culoarea roșie semitransparentă.

Definiți pentru fundal culoarea verde semitransparentă.

Definiți pentru bordură culoarea albastru deschis semitransparentă.