Kleur toegeken deur rgba in CSS

Benewens die rgb formaat, bestaan daar die rgba formaat, wat op 'n soortgelyke manier werk, maar met 'n vierde parameter laat dit jou toe om deursigtigheid vir die kleur te spesifiseer. Hierdie parameter aanvaar breukwaardes van 0 tot 1. Hier is een gelykstaande aan volle ondeursigtigheid, en nul - volle deursigtigheid.

Kom ons kyk na voorbeelde.

Voorbeeld

Laat ons eers so 'n ondeursigtige blok maak:

<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); /* rooi kleur */
}

Voorbeeld

Laat ons nou deursigtigheid by die teks voeg:

<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); /* rooi deursigtig */
}

Voorbeeld

En laat ons nou 'n deursigtige rand maak:

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

Voorbeeld

En laat ons nou 'n deursigtige agtergrond maak:

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

Praktiese take

Ken aan die paragrawe 'n rooi deursigtige kleur toe.

Ken aan die agtergrond 'n groen deursigtige kleur toe.

Ken aan die rand 'n blou deursigtige kleur toe.