เพื่อให้ Opacity ทำงานบนเว็บเบราว์เซอร์สมัยใหม่ทุกตัว เช่น Firefox, Google Chrome, Opera ให้ใช้คุณสมบัติ opacity และตั้งค่าใน CSS class −
transparent{ opacity: 0.3; }
นี่คือโค้ดสำหรับการทำงานกับ Opacity บนเบราว์เซอร์สมัยใหม่ −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } img { width:270px; height:200px; } .transparent{ opacity: 0.3; } </style> </head> <body> <h1>Opacity example</h1> <img src="https://i.picsum.photos/id/505/800/800.jpg" > <img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" > </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
