Transparent Background With CSS


bgtrans Transparent Background With CSSSebenarnya 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:

birutransp Transparent Background With CSS

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:

Related Posts:

    5 Responses to Transparent Background With CSS

    1. andikurnia says:

      saya juga paling sebel sama yang namanya IE. Entah yang baru ini (bundle windows8) mengalami peningkatan atau tidak.

    2. kangtanto says:

      setahuku yang versi 9 yang support ndik….

    3. Puzha says:

      maaf kang, saya ‘kan pemula ..
      saya masih bingung dimana penempatan syntax nya ..
      minta bantuannya ya kang ..!!

    4. saepuloh says:

      Maaf kpda penulis, saya belum ngerti penempatan syntax’y. ma’lum saya pemula.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>