CSS Opacity

Sebuah element html dapat diatur tingkat transparasinya dengan property css3 yaitu opacity.

Value atau nilai dari opacity yaitu dari 0 – 1. Nilai 0 maka element tidak terlihat, jika nilai 1 maka tidak ada transparansinya.

Syntax

Untuk membuat opacity di css, sintaks yang digunakan adalah:

div {
 opacity: 0.89;
}

0.89 adalah nilai dari opacity element <div>.

Gambar transparan

Kamu bisa mengatur transparasi gambar img. Contoh:

Opacity: 0.20

Opacity: 0.60

Opacity: 1.0

Untuk mengubahnya tinggal saya kasih kode:

img {
 opacity:0.2;
}

0.2 bisa diganti dengan 0.6, 0.8, dll.

Efek :hover transparan

Kamu bisa menambahkan efek transparan ketika kursor diarahin, dengan menambahkan pseudo-class :hover.

Caranya:

img:hover {
 opacity:0.2;
}

Kotak div transparan

Sebuah kotak div html juga bisa kamu kasih transparant. Intinya semua element bisa kamu kasih opacity.

Contoh:

Transparant di warna RGB

Kode warna html itu ada banyak, salah satunya adalah RGB (Red, Green, Blue).

Tinggal tambahkan value opacity. Misal kode warna rgb(83, 64, 255) ditambah opacity 0.5 menjadirgb(83, 64, 255, 0.5).

Teks di kotak transparan

Ada problem dimana, ketika box diberi transparan maka teks di dalamnya juga ikut transparan. Seperti ini:

Untuk mensiasatinya, maka kita harus menggunakan transparant RGB yang diberi transparant adalah kode warnanya.

Kode style yang saya gunakan:

div {
 background:rgb(247, 148, 0, 0.2);
 color:#000;
 width:200px;
 float:left;
 height:100%;
 text-align:center;
}

Saya gunakan kode warna RGB rgb(247, 148, 0, 0.2); dengan 0.2 adalah nilai opacity.