Hallo teman-teman, kali ini kita akan membahas tentang efek transparan dengan opacity pada CSS. Jika teman-teman ada yang bisa photoshop mungkin tidak asing dengan kata opacity. Biasa digunakan untuk membuat efek transparan pada objek. Pada CSS fungsi opacity ini tidak jauh beda dengan photoshop, yaitu untuk memberikan sentuhan transparansi pada objek yang diberikan efek tersebut. Cukup dengan memberikan tulisan opacity lalu berikan nilainya. Untuk nilai opacity ini paling terkecil adalah 0 dan yang paling besar adalah 1. Artinya angka 0 untuk efek transparan full (hilang), semakin naik semakin jelas gambarnya. Karena yang paling besar adalah angka 1 maka disini diperbolehkan menggunakan angka desimal seperti misalnya 0.3 atau 0.8. Semakin mendekati angka 1 semakin jelas gambarnya.
Oke langsung saja teman-teman bisa ikuti code dibawah ini untuk lebih jelasnya.
opacity.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <style> img { opacity: 0.7; } </style> </head> <body> <h1>Gambar Transparan</h1> <img src="img_forest.jpg" alt="Forest" width="170" height="100"> </body> </html> |
Maka hasilnya akan seperti ini.
         
Sekian pembahasan mengenai efek transparan dengan opacity pada CSS. Semoga bermanfaat.