Memberikan Transparansi Warna ~ Pemrograman dan Teknologi

Kita bisa membuat elemen HTML terlihat transparan latar belakangnya dengan menggunakan properti background atau background-color. Transparansi latar belakang HTML bisa ditentukan dengan menggunakan fungsi RGBA dan HSLA. Kedua fungsi ini menggunakan 3 nilai untuk menentukan warna. Nilai keempat digunakan untuk menentukan transparansi warna.

Fungsi RGBA dan HSLA, pada dasarnya hanya fungsi RGB dan HSL yang diberi nilai keempat. Nilai keempat tersebut disebut dengan alpha. Alpha yang bernilai 0 hingga 1 digunakan untuk memberikan transparansi, atau mungkin lebih tepatnya opasitas. Nilai 0 akan membuat background atau elemen tidak terlihat, sebaliknya 1 akan membuat background terlihat tanpa transparansi. Nilai 0.5 atau nilai-nilai di antara 0 dan 1 akan membuat elemen HTML terlihat transparan dan bercampur dengan warna atau apapun yang ada di belakangnya.

.styleku{
    height:100%;
    background : green;
    color : brown;
}

.styleku1{
    background : RGBA(255, 255, 0, 0.5);
}

.styleku2{
    background : HSLA(60, 100%, 50%, 0.75);
}

Kode HTML-nya bisa kalian buat sendiri. Kalian juga bisa menggunakan kode HTML di bawah ini jika malas mengetik.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
<h2>Judul</h2>
<Div class= "styleku">
    <div class="styleku1">
        <p>ini paragraf 1</p>
        <p>ini paragraf 2</p>
        <p>ini paragraf 3</p>
        <p>ini paragraf 4</p>
    </div>
    <div class="styleku2">
        <p>ini paragraf 5</p>
        <p>ini paragraf 6</p>
        <p>ini paragraf 7</p>
        <p>ini paragraf 8</p>
    </div>
</div>
</BODY>
</HTML>

Kedua elemen div pada contoh di atas sebenarnya berwarna kuning, tapi karena diberi transparansi, maka warnanya bercampur dengan latar belakangnya sehingga terlihat hijau. Coba ubah nilai alphanya menjadi satu (1), tanpa mengubah nilai 3 parameter sebelumnya. Warnanya latar belakang seharusnya menjadi kuning yang merupakan perpaduan warna Merah dan Hijau.

.styleku{
    height:100%;
    background : green;
    color : brown;
}

.styleku1{
    background : RGBA(255, 255, 0, 1);
}

.styleku2{
    background : HSLA(60, 100%, 50%, 1);
}

Kalian bisa menggunakan RGBA dan HSLA pada properti color. Hasilnya tentu saja adalah tulisan transparan. Apa kalian bisa menggunakannya pada warna border? Coba saja sendiri.