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
- css background transparent
- kode css warna transparan
- background website
- kode warna transparan css
- browser transparan
5 Responses to Transparent Background With CSS
saya juga paling sebel sama yang namanya IE. Entah yang baru ini (bundle windows8) mengalami peningkatan atau tidak.
setahuku yang versi 9 yang support ndik….
maaf kang, saya ‘kan pemula ..
saya masih bingung dimana penempatan syntax nya ..
minta bantuannya ya kang ..!!
thanks bro
Maaf kpda penulis, saya belum ngerti penempatan syntax’y. ma’lum saya pemula.