Membuat background Transparan CSS

Membuat background Transparan CSS -  Sobat Gee hari ini mau update lagi sudah lama ga ada inspirasi mau tulis apa nih blog, kangen aja tapi saya juga bosen nih konten gini gini mulu, sebenarnya banyak baget mau sharing tapi keterbatasan waktu untuk menulis membuat blog ini seperti terbengkalai.

Mungkin bukan saya sendiri yang mengalami kesulitan saat ingin membuat background transparan eh malah tulisannya juga ikut transparant, tadinya saya selalu menggunakan teknik “akal akalan” menggunakan teknik relative dan absolute pada css, nah kali ini saya punya teknik yang lain yang mungkin bisa memberikan inspirasi baru buat sobat gee yang sudah datang ke blog ini, ok deh langsung aja ya biar ga bosen baca tulisannya.

Anggaplah sebagai contoh kasus kamu membuat box menggunakan div dengan background warna hitam, kemudian background kamu berikan tingkat opacity atau transparansi 70% dengan warna tulisan warna putih.

Buat tag div dan anggaplah kamu memberikan property ID nya dengan pengenal “box”, kemudian kamu isi dengan kalimat “saya sudah membuat text dengan background transparan” berikut script HTML dan CSS nya :

HTML

<div id='box'>
saya sudah membuat text dengan background transparan
</div;>

CSS

#box{
	Width:500px;
	Height:500px;
	Background-color:rgb(0,0,0);
	Background-color:rgba(0,0,0,0,7)
}

Keterangan :

#box membuat html kode dengan hasil background berwarna hitam sesuai transparan 70% dengan lebar dan tinggi 500px.

Kunci dari tips tadi terletak di nilai background color, kalau selama ini kita biasa menggunakan kode wrana hexa namun untuk membuat transparan kita membuat nilainya menggunakan kode warna RGB dan yang membuatnya transparan ada di nilai RGBA ditambahkan berapa persen tingkat opacitynya sesuai kasus diatas gee memberikan nilai 70%.

Nah itu dulu ya mudah-mudahan bisa memberikan inspirasi, kasih semangat saya buat tulis terus ya dengan komentar kamu di bawah. Terima kasih