CSS Image Opacity สำหรับทุก Browser รวม IE 8 และต่ำกว่า

Cross-browser Image Opacity: รองรับ IE 8 และ Browser เก่าทั้งหมด

เหมือนบทก่อนหน้าแต่เน้น <img> tag โดยเฉพาะ ใช้ opacity (standard) + filter: alpha(opacity=...) (IE 5-9) + -moz-opacity (Firefox < 0.9) + -khtml-opacity (Safari 1.x)

โค้ดตัวอย่าง

<!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>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>

สรุป Browser Support

สถานะปัจจุบัน (2024+)

• IE 11 จบการ support (June 2022) – ไม่จำเป็นต้องใส่ fallback อีกต่อไป
• ใช้แค่ opacity: 0.5; หรือ rgba() / #rrggbbaa ได้เลย
• ถ้าต้อง support IE 11 (enterprise legacy) ใช้ filter: alpha(opacity=50) คู่กับ opacity

Opacity vs Background Transparency

• opacity: 0.5 – ทั้ง element และ children โปร่งใส
• background: rgba(0,0,0,0.5) – แค่พื้นหลัง โปร่งใส children ไม่กระทบ
• background: #00000080 – 8-digit hex (alpha channel) ทันสมัย