Menetapkan Warna melalui rgba dalam CSS

Selain format rgb, terdapat format rgba, yang berfungsi dengan cara yang serupa, tetapi dengan parameter keempat membolehkan menetapkan ketelusan kepada warna. Parameter ini menerima nilai pecahan dari 0 hingga 1. Dalam kes ini, satu sepadan dengan ketidaktelusan penuh, dan sifar - ketelusan penuh.

Mari kita lihat contohnya.

Contoh

Pertama, mari buat blok tidak telus 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 ketelusan separa 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 separa telus */
}

Contoh

Sekarang mari buat sempadan separa telus:

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

Contoh

Sekarang mari buat latar belakang separa telus:

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

Masalah Praktikal

Tetapkan warna merah separa telus kepada perenggan.

Tetapkan warna hijau separa telus kepada latar belakang.

Tetapkan warna biru muda separa telus kepada sempadan.