Cara membuat background transparan dengan CSS dan Gambar

Cara membuat background yang transparan dalam HTML dapat kita lakukan dengan menggunakan CSS maupun gambar.

Membuat background transparan dengan CSS.

Untuk membuat background transparan dengan CSS dapat menggunakan style CSS dengan properti opacity dan background dengan nilai rgba. Kedua properti tersebut merupakan properti dari CSS3.

Kekurangan dari kedua properti diatas adalah tidak mendukung Internet Explorer 8. Untuk properti opacity W3school memberikan solusinya dengan menggunakan filter:alpha.

filter:alpha(opacity=nilai dalam %);

Untuk properti background dengan nilai rgba belum bisa jalan di IE. Dan perlu diperhatikan juga, bila menggunakan filter diatas maka dokumen CSS kita tidak akan memenuhi standar CSS3 alias tidak valid.

Ikuti link berikut ini untuk melihat contoh dan untuk mengetahui lebih lanjut tentang membuat background transparan dengan CSS.

Membuat background transparan dengan gambar.

Untuk gambar yang transparan dengan pengaturan opacity dapat di buat di program grafik seperti Photoshop atau Firework dalam format PNG.

Menggunakan gambar yang transparan ini lebih baik karena mendukung CSS2.1 dan dapat dijalankan di berbagai browser modern saat ini termasuk juga di IE7.

Problemnya adalah untuk IE6 dan versi dibawahnya belum mendukung penggunaan gambar PNG yang transparan ini.

Jika anda perduli dengan IE6 bisa mencari solusinya dengan menggunakan javascript atau jquery yang tidak akan di bahas dalam modul ini.

Klik link berikut untuk melihat langsung contoh dari membuat background transparan dengan gambar.

Selamat mencoba.