CSS Image Opacity / Transparency

Contoh 1 - Membuat Gambar Transparan
 
Pertama akan menunjukkan Anda bagaimana untuk membuat gambar transparan dengan CSS.

Regular image:
klematis
Gambar yang sama dengan transparansi:
klematis

Kodenya seperti ini :

<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" />

Firefox menggunakan properti opacity: x untuk transparansi, sementara IE menggunakan filter: alpha (opacity = x).

Tip: Sintaks CSS3 untuk transparansi adalah opacity: x.
Di Firefox (opacity: x) x dapat berupa nilai 0,0-1,0. Sebuah nilai yang lebih rendah membuat elemen lebih transparan.

Dalam IE (filter: Alpha (opacity = x)) x dapat berupa nilai 0-100. Sebuah nilai yang lebih rendah membuat elemen lebih transparan.

Contoh 2 - Gambar Transparan - Mouseover Effect


Mouse over gambar :
klematis klematis

Kodenya seperti ini :

<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Kita melihat bahwa garis pertama dari kode adalah mirip dengan kode dalam Contoh 1. Selain itu, telah menambahkan atribut onmouseover dan onmouseout atribut. Atribut onmouseover mendefinisikan apa yang akan terjadi ketika pointer mouse bergerak gambar. Dalam hal ini foto ke TIDAK harus transparan ketika kita memindahkan pointer mouse di atasnya.

Sintaks untuk ini di Firefox adalah: this.style.opacity = 1 dan sintaks di IE: this.filters.alpha.opacity = 100.

Ketika pointer mouse bergerak menjauh dari gambar, kita ingin gambar harus transparan lagi. Hal ini dilakukan pada atribut onmouseout.


Bookmark and Share

0 komentar: