Menentukan Warna melalui rgba di CSS

Selain format rgb, terdapat format rgba, yang bekerja dengan cara serupa, tetapi dengan parameter keempat memungkinkan untuk mengatur transparansi warna. Parameter ini menerima nilai pecahan dari 0 hingga 1. Di mana satu berarti opasitas penuh, dan nol - transparansi penuh.

Mari kita lihat contohnya.

Contoh

Pertama, mari buat blok tidak transparan seperti ini:

<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); /* warna merah */
}

Contoh

Sekarang mari tambahkan transparansi pada teks:

<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); /* merah transparan */
}

Contoh

Dan sekarang mari buat border yang transparan:

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

Contoh

Dan sekarang mari buat latar belakang yang transparan:

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

Tugas Praktis

Berikan warna merah transparan pada paragraf.

Berikan warna hijau transparan pada latar belakang.

Berikan warna biru muda transparan pada border.