Angivelse af farve via rgba i CSS

Ud over formatet rgb findes der formatet rgba, som fungerer på samme måde, men som en fjerde parameter giver mulighed for at indstille farvens gennemsigtighed. Denne parameter tager decimalværdier fra 0 til 1. Her svarer en til fuldstændig ugennemsigtighed, og nul til fuldstændig gennemsigtighed.

Lad os se på nogle eksempler.

Eksempel

Lad os til at starte med lave en sådan ugennemsigtig blok:

<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); /* rød farve */
}

Eksempel

Lad os nu tilføje gennemsigtighed til teksten:

<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); /* rød gennemsigtig */
}

Eksempel

Og lad os nu lave en gennemsigtig kant:

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

Eksempel

Og lad os nu lave en gennemsigtig baggrund:

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

Praktiske opgaver

Angiv en rød gennemsigtig farve til afsnittene.

Angiv en grøn gennemsigtig farve til baggrunden.

Angiv en lyseblå gennemsigtig farve til kanten.