Cara Membuat Background Transparan dengan CSS

Cara Membuat Background Transparan dengan CSS

Untuk membuat background transparent, disini kita dapat menggunakan 2 properti style CSS, yaitu dengan menggunakan opacity dan background RGBA (Red, Green, Blue, Alpha). Oke sekarang kita coba satu-satu :

 1 .  Contoh dengan menggunakan opacity:

Kode HTML:

<div class="transparan1"></div>

Kode CSS:

.transparan1{background:#000;opacity:0.4;filter:alpha(opacity=40);}

style "filter:alpha(opacity=40);" diatas adalah untuh IE.

Untuk nilai (value) dari opacity dan alpha kalau 0.1 berarti 10%, 0.2=20%... dst, untuk nilai rgb-nya dapat dilihat di Kode warna RGB sedangkan jika menggunakan filter maka nilainya langsung ditulis tanpa lambang %, contoh 12 artinya 12%, 50=50%...dst.

2 .  Contoh dengan menggunakan rgba:

Kode HTML:

<div class="transparan2"></div>

Kode CSS:

.transparan2{background:rgba(0,0,0,0.4);}

maaf untuk pengguna MSIE, bila ada yang mempunyai solusi agar rgba ini bisa jalan di MSIE silahkan sampaikan melalui comment.

     Dengan properti opacity maka efek dari elemen yang menggunakan opacity tersebut akan mempengaruhi semua elemen-elemen didalamnya. Seperti pada contoh pertama diatas semuanya menjadi ikut redup dan hampir tidak terbaca padahal warna tulisannya adalah warna putih sama seperti contoh yang kedua.

Kalau ada yang kurang jelas, dapat ditanyakan pada comment di bawah. :