Cara Menggunakan Function hsla() pada CSS

Notasi fungsional hsla () digunakan untuk mengatur warna dalam format HSL, dan dibutuhkan 4 nilai yang dipisahkan koma: hue, saturation, lightness (atau luminance) dan transparansi alpha.

Sama seperti notasi fungsional rgb () yang memiliki rgba () alfa, notasi fungsional hsl () memiliki hsla (), alfa, yang, seperti halnya fungsi rgba (), memiliki nilai tambahan keempat, nilai alfa , yang merupakan angka desimal antara 0 dan 1 yang mewakili opacity warna, di mana 1 berarti warna sepenuhnya buram, dan 0 berarti warna sepenuhnya transparan.

Contoh berikut ini akan mengatur warna latar belakang pada elemen ke warna ungu semi-transparan, sehingga latar belakang wadah elemen akan terlihat.

 .modal {
            background-color: hsl(270, 100%, 0.5);
          }

Browser Support

Kata kunci hsl (), hsla (), rgba (), transparan, 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.