Cara Menggunakan Function rgba() pada CSS

Notasi fungsional rgba () digunakan untuk mengatur warna sebagai kombinasi nilai merah, hijau, biru dan alfa untuk transparansi.

Fungsi color adalah variasi dari fungsi rgb (). Selain tiga nilai warna yang diterimanya, ia juga menerima nilai keempat: nilai alfa, atau opacity, yang dinyatakan sebagai angka desimal antara 0 dan 1. Misalnya, jika Anda ingin menetapkan merah semi-transparan warna, Anda dapat menulis: rgba (100%, 0, 0, 0,5), di mana nilai terakhir 0,5 mengatur transparansi warna menjadi setengah nilainya. Nilai alfa 1 berarti warna sepenuhnya buram, dan nilai 0 berarti warna sepenuhnya transparan.

Contoh berikut akan membuat warna latar belakang ungu semi-transparan pada elemen, dengan teks putih.

.some-class {
  color: rgba(255, 255, 255, 1); /* fully-opaque white text color */
  background-color: rgba(255, 0, 255, 0.5); /* semi-transparent background color */
}

Browser Support

Fungsi hsl (), hsla (), rgba (), transparent, dan currentColor didukung di semua browser utama dan di Internet Explorer mulai dari versi 9.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.