Ini Dia Cara Membuat Background Color Transparan Dengan CSS
Halo sobat digital, pada tutorial kali ini saya akan berbagi sedikit tips untuk kalina yang baru belajar dunia Website khususnya di User Interface.
Topik yang akan kita bahas kali ini adalah gimana sih cara membuat Background color Transparan dengan css?
Background transparant adalah sebuah gambar atau warna yang memiliki tingkat opacity (Ketebalan) yang kecil sehingga objek yang berada dibelakangnya akan terlihat.
Biasanya teknik background transparant ini digunakan untuk mempercantik tampilan sebuah website agar website tersebut lebih menarik dan tentunya membuat tampilan website lebih hidup.
Kalau sudah jelas, yuk tanpa panjang lebar lagi, mari kita simak caranya dibawah ini gengss :)
Cara Membuat Background Color Transparan Dengan CSS
Pertama tama buatlah file projek/latihan baru yan berisikan komponen html.
Pada file HTML tersebut, buatlah sebuah baris kode seperti berikut ini :
Penjelasan kode CSS diatas:
Body , pada tag body, saya memberikan background gambar, yang mana itu digunakan untuk sebagai contoh objek yang akan berada dibelakang kotak nantinya.
.transparent, pada class tersebut berisikan beberapa baris css yang digunakan untuk membuat kotak dan membentuk background tranparant.
Inti dari kode diatas supaya background menjadi transparant adalah perintah ini background-color:rgba(0, 0, 0, 0.5);
Kenapa warnanya abu-abu transparant? itu karena kode warna RGB(Red, Green, Blue) pada contoh diatas adalah 0,0,0 yang mana itu adalah kode warna hitam dan di paling belakang karena kita memberikan opacity 0.5 maka warna hitam tersebut berubah menjadi tranparant keabu abuan. Semakin besar nilai opacity yang diberi maka semakin tebal pula warna hitamnya begitu juga sebaliknya, jika semakin kecil maka semakin transparant juga waranya.
Gimana? Gampang kan?
Sekian tutorial Cara Membuat Background Color Transparan Dengan CSS, semoga ilmunya bermanfaat untuk kita semua :)
apabila ada pertanyaan dan ada yang kurang jelas bisa kalian tanyakan di kolom komentar dibawah ini
