Kleur instellen via rgba in CSS

Naast het rgb formaat bestaat er het rgba formaat, dat op een vergelijkbare manier werkt, maar als vierde parameter maakt het het mogelijk om transparantie aan de kleur toe te voegen. Deze parameter accepteert decimale waarden van 0 tot 1. Hierbij komt 1 overeen met volledige dekking, en nul - volledige transparantie.

Laten we eens kijken naar voorbeelden.

Voorbeeld

Laten we eerst een volledig dekkend blok maken:

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

Voorbeeld

Laten we nu transparantie toevoegen aan de tekst:

<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); /* rood transparant */
}

Voorbeeld

Laten we nu een transparante rand maken:

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

Voorbeeld

Laten we nu een transparante achtergrond maken:

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

Praktische opdrachten

Stel voor de alinea's een rood transparante kleur in.

Stel voor de achtergrond een groen transparante kleur in.

Stel voor de rand een lichtblauw transparante kleur in.