คุณสมบัติ opacity เป็นโซลูชันสมัยใหม่ที่ทำงานได้กับ Firefox 0.9+, Safari 2, Opera 9+, IE 9+ และทุกเวอร์ชันของ Chrome คุณสมบัติ -moz-opacity สำหรับ Firefox เวอร์ชันเก่ากว่า 0.9 ส่วน -khtml-opacity สำหรับ Safari เวอร์ชัน 1 ขึ้นไป คุณสมบัติ filter สำหรับ IE เบราว์เซอร์ 5-9 เพื่อให้ได้เอฟเฟกต์ความโปร่งใส การใช้ค่าทั้งหมดนี้ร่วมกันเป็น fallback สำหรับ opacity สมัยใหม่ ทำให้เราสามารถใช้ opacity ได้ในทุกเบราว์เซอร์
นี่คือโค้ดสำหรับการมี Cross Browser Opacity โดยใช้ CSS −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } img { width: 270px; height: 200px; } .transparent { filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } </style> </head> <body> <h1>Cross browser opacity</h1> <img src="https://i.picsum.photos/id/605/800/800.jpg" /> <img class="transparent" src="https://i.picsum.photos/id/605/800/800.jpg" /> <h3>The second image above will get opaque on all browsers</h3> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
