Задавање на боја преку 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;
}

Практични задачи

Задајте им на параграфите црвена провидна боја.

Задајте му на позадината зелена провидна боја.

Задајте му на границата сина провидна боја.