Cara Membuat Gambar Transparan

Ada kalanya kita memerlukan tampilan gambar dalam bentuk transparan, misalkan jika kita sedang memerlukan gambar yang akan difungsikan sebagai background atau sekedar untuk variasi tampilan saja.

Untuk membuat gambar menjadi tampak transparan cukup mudah, tinggal ikuti langkah mudah berikut.

1. Kode untuk add gambar biasa adalah seperti terlihat dibawah ini:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-x2yKkigRC_jUV5aVAviz-6dfoDhTgFOEfQ8C5zdNoIPW2fzdzXw2TikrC7wk85pppSIOaWgZMz_NRLtAJ6ZWbrR2JrV46XDm6NrQCxSGlAoIxf9z42lgwP8ORm7Wl6DN0orn4Bory4/s1600/ayza-profile.jpg" alt="Aksesoris Buatan Sendiri" height="300" width="400" />

Hasilnya:

2. Tambahkan kode style="opacity:0.4;filter:alpha(opacity=40)" pada kode add gambar tadi sehingga kode-nya menjadi:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-x2yKkigRC_jUV5aVAviz-6dfoDhTgFOEfQ8C5zdNoIPW2fzdzXw2TikrC7wk85pppSIOaWgZMz_NRLtAJ6ZWbrR2JrV46XDm6NrQCxSGlAoIxf9z42lgwP8ORm7Wl6DN0orn4Bory4/s1600/ayza-profile.jpg" alt="Aksesoris Buatan Sendiri" height="300" width="400" style="opacity:0.4;filter:alpha(opacity=40)" />

Hasilnya:

Note: Nilai opacity adalah yang menentukan nilai transparansi-nya, semakin kecil nilainya maka gambar akan semakin transparan.

Dibawah ini adalah setelah nilai opacity-nya kita ganti menjadi 20, bandingkan!!

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY-x2yKkigRC_jUV5aVAviz-6dfoDhTgFOEfQ8C5zdNoIPW2fzdzXw2TikrC7wk85pppSIOaWgZMz_NRLtAJ6ZWbrR2JrV46XDm6NrQCxSGlAoIxf9z42lgwP8ORm7Wl6DN0orn4Bory4/s1600/ayza-profile.jpg" alt="Aksesoris Buatan Sendiri" height="300" width="400" style="opacity:0.2;filter:alpha(opacity=20)" />

Hasilnya: