CSS Transparent Background (Latar Transparan/Tembus Pandang)

Penggunaan Background/Latar tembus pandang sangat sering digunakan bagi anda yang sedang mendesign website atau blog. Saya akan menjelaskan langkah-langkah dalam membuat Latar tembus pandang dalam CSS. Kita akan membuat dala dua metode, yaitu menggunakan latar berwarna yang kemudian kita buat Transparan dan yang kedu menggunakan latar gambar yang kita buat Transparan.

Latar Transparan Mengunakan RGBA

The HTML

1 2 3

<div id="container"> <!-- Your content here --> </div>

The CSS

01 02 03 04 05 06 07 08 09 10

body {     margin: 0;     padding: 0;     background: url('background.jpg'); } #container {     width: 800px;     margin: 0 auto; }

Seperti dilihat pada kode CSS kita telah membuat box(kotak) dengan lebar 800px berada di tengah. dalam kode tersebut kita juga sudah menaruh latar belakang gambar di dalam tag body. Setelah itu baru kita memberi semi transparent Background .

Untuk memasukan Background(Latar) ke dalam #container, kita menggunakan background-color property yaitu dengan RGBA colors. 

Berikut ini parameter koding yang digunakan pada RGBA :

1	rgba(red,green,blue,alpha)

Ketiga parameter utama di atas menjelaskan, warna apa yang ingin kita buat dengan memberikan berapa nilai RED, GREEN, BLUE.

Untuk ALPHA seperti memberi nilai kejelasan(opacity). Apabila kita memeberi nilai 100 berarti gambar tersebut jelas. dan apabila kita memberi nilai >1 berarti samar-samar. Sedangkan memberi nilai 0 berarti tidak ditampilkan. Berikut contoh dan hasilnya.

1 2 3 4 5

#container {     width: 800px;     margin: 0 auto;     background-color: rgba(0,0,0,0.8); }

Hasilnya

Pada parameter RGB kita tidak memberi nilai alias 0. Maka Background tersebut menjadi warna hitam. Sedangkan untuk nilai kejelasan/alpha kita beri 8 sehingga ada sedikit transparan.

Latar Transparan Mengunakan Gambar

 The CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

#container {     width: 800px;     margin: 0 auto;     padding: 50px;     position: relative; } #container:after {     content: '';     background: url('header.jpg');     opacity: 0.5;     top: 0;     left: 0;     bottom: 0;     right: 0;     position: absolute;     z-index: -1; }

Berbeda dengan parameter RGBA untuk membuat Latar menjadi Transparan maka kita hanya mengatur nilai dari opacity. Dimana nilai atau parameternya 0.5. Dengan kode opacity:0.5 maka kejalasan gambar menjadi setengah seperti pada hasil di bawah ini :

Untuk saran saya, latar belakang hendaknya berupa warna saja. Warna yang tentu saja bertolak belakang dengan warna tulisan. Karena latar belakang gambar akan membuat pusing bagi para pembaca.

sumber : Webdesignerhut