Hallo teman-teman bertemu lagi pada tutorial dumet school, pada tutorial kali ini kita akan membahas tentang bagaimana cara membuat transparan pada background dengan background rgba pada css.

Teman-teman pasti tau properties css untuk membuat sebuah element menjadi memudar atau kecerahannya menjadi berkurang?, ya opacity adalah salah satu properties css yang berfungsi untuk mengatur kecerahan suatu object atau element.

Namun kelemahan dari opacity ialah keseluruhan objek akan memudar, maksudnya ialah ketika kita mempunyai sebuah area div dimana div tersebut banyak element didalamnya, lalu kita berikan opacity pada bagian div tersebut, keseluruhan content yang ada didalam div akan memudar, berbeda ketika kita menyisipkannya kedalam background rgba, mungkin untuk lebih jelasnya kita langsung saja praktekkan.

Silahkan teman-teman buat sebuah file html dan ketikan script berikut ini:

Lalu kita mengatur script cssnya, silahkan teman-teman ketikan script berikut ini:

Sehingga kelengkapan script nya adalah seperti berikut:

Penjelasan dari script diatas ialah, saya membuat satu div dengan class kotak, dimana bagian div class kotak terdiri dari lebar 100% dan tinggi 100px dengan background:rgba(255,0,0,0.3), dan nilai 0.3 adalah tingkat kecerahannya, jadi jika teman-teman save maka hasilnya akan seperti berikut ini:

membuat transparan pada background dengan background rgba pada css1

Gimana cukup mudah bukan?, oke mungkin untuk tutorial kali ini tentang membuat transparan pada background dengan background rgba pada css cukup sampai disini dulu, semoga bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial saya berikutnya,

terimakasih.