Cara Membuat Background Transparan dengan CSS

Ada dua properti style CSS yang dapat kita gunakan untuk membuat background yang transparan yaitu opacity dan background dengan nilai rgba (red, green, blue, alpha).
Berikut adalah contoh dari kedua properti tersebut.
Contoh dengan opacity:

Tulisan ini ada didalam elemen div dengan class transparan1 dan menggunakan background warna hitam dengan opacity 40%.
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.
Contoh dengan rgba:

Tulisan ini ada didalam elemen div dengan class transparan2 dan menggunakan background warna hitam dengan nilai rgb dan nilai alpha 40%.
Kode HTML:

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

Kode CSS:

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

Sorry 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.
Sedangkan bila menggunakan background rgba adalah sebaliknya tidak mempengaruhi elemen-elemen didalamnya tapi masalahnya adalah tidak mendukung semua browser terutama MSIE7,8 yang masih banyak penggunanya.
Jadi pilihannya ada di tangan anda.

Tweet