Membuat Background Transparan Dengan CSS

Sebenarnya teknik ini sudah lumayan lama, akan tetapi mumpung kangtanto lagi ndesain web n pas menerapkan ini, tidak ada salahnya ditulis kembali. Ya hitung-hitung sebagai tempat berbagi ilmu bagi mereka yang pemula. Teknik transparan ini sebenarnya tidak serumit teknik-teknik sebelumnya. Teknik sebelumnya bisa saja kita membuat sebuah background warna di Photoshop kemudian kita rubah nilai transparansinya. Nah kini kita tinggal menggunakan sebuah cara di CSS yang disebut dengan RGBa.

RGBa membutuhkan empat nilai, yaitu 3 kode warna RGB dari warna yang kita inginkan dan nilai terakhir merupakan nilai transparansi yang kita inginkan. Nilai transparansi ini dimulai dari 0 hingga 1, dimana pada nilai 0 maka tidak akan nampak background warna yang diinginkan, sedangkan untuk nilai 1 maka background tidak akan transparan sama sekali.

Contoh penulisannya seperti di bawah ini:

div {
           background: rgba(7,111,192, .7);
}

Kode tersebut akan menghasilkan warna biru dengan transparansi 0.7. Apabila diterapkan pada sebuah elemen misalnya div atau sebuah p, maka akan menghasilkan seperti yang nampak pada gambar di bawah ini:

Masalahnya adalah masih ada beberapa browser yang belum support cara ini, terutama browser versi lama (you know I hate IE). Nah untuk mengakali versi lama ini, sebaiknya anda juga menyediakan style alternatif apabila ternyata browser si pengguna tidak mendukung. Caranya adalah dengan memberikan background warna dengan tidak adanya transparansi. Seperti di bawah ini:

 

div {
           background: rgb(7,111,192);
            background: rgba(7,111,192, .7);
}

Apabila anda tidak menyediakan background alternatif ini, maka apabila browser yang digunakan oleh user tidak support rgba, maka tidak akan ada background yang ditampilkan.

Incoming search terms:

• membuat background transparan dengan CSS
• background web
• css transparan
• teknik transparan
• cara membuat background web transparan
• kode warna transparan css
• css background transparent
• background website
• kode css warna transparan
• cara mentransparankan facebook lite

Related Posts:

• Membuat Web : Mengatur List Melalui CSS
• Belajar CSS: Memahami Background
• Belajar CSS: Mengenal Jenis Selector Pada CSS
• Cara Menerapkan CSS Pada Dokumen HTML
• Mendesain Web Dengan Rapi, Gunakan Grid