Transparansi dengan RGBA

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 28 dari 76.

Dalam CSS, warna RGBA adalah pengembangan warna RGB yang menyertakan kanal alpha untuk menentukan opasitas suatu warna. RGBA adalah singkatan dari Red, Green, Blue, dan Alpha. Parameter alpha adalah angka antara 0.0 (sepenuhnya transparan) dan 1.0 (sepenuhnya opak), sehingga kamu dapat membuat warna dengan tingkat transparansi yang beragam.

Berikut sintaks dasar untuk menggunakan warna RGBA di CSS:

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

Contohnya:

p {
    color: rgba(255, 0, 0, 0.5); /* Merah semitransparan */
    background-color: rgba(0, 255, 0, 0.3); /* Hijau semitransparan */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* Biru semitransparan */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Lapisan hitam semitransparan */
}

Tantangan

Mudah

Kamu diberi dokumen HTML dengan heading <h3> dan paragraf <p>. Tugasmu adalah menggunakan property background-color dengan fungsi rgba() untuk memberi elemen-elemen ini gaya transparan. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <h3>. Atur warna latar menjadi biru menggunakan rgba(0, 0, 255, 0.5) (transparansi 50%).
Tulis aturan CSS yang menargetkan elemen <p>. Atur warna latar menjadi hijau menggunakan rgba(0, 128, 0, 0.3) (transparansi 30%).

Coba sendiri

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>