CSS Opacity (độ trong suốt) hoạt động trên tất cả trình duyệt

Để opacity hoạt động trên trình duyệt cũ (IE 5-8, Firefox < 0.9, Safari 1), cần fallback nhiều thuộc tính:

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    img {
      width: 270px;
      height: 200px;
      margin-right: 20px;
      vertical-align: top;
    }
    .transparent {
      /* IE 5-9 */
      filter: alpha(opacity=30);
      /* Firefox < 0.9 */
      -moz-opacity: 0.3;
      /* Safari 1.x */
      -khtml-opacity: 0.3;
      /* Modern browsers */
      opacity: 0.3;
    }
  </style>
</head>
<body>
  <h1>Opacity Tương Thích Tất Cả Trình Duyệt</h1>
  <img src="https://i.picsum.photos/id/305/800/800.jpg" alt="Ảnh gốc" />
  <img class="transparent" src="https://i.picsum.photos/id/305/800/800.jpg" alt="Ảnh opacity 30%" />
  <h3>Ảnh thứ 2 sẽ trong suốt 30% trên mọi trình duyệt</h3>
</body>
</html>

Kết quả

Hai ảnh cạnh nhau: ảnh gốc bình thường, ảnh thứ 2 mờ 30% (opacity: 0.3) hoạt động từ IE5 đến Chrome/Firefox/Safari mới nhất.

Thứ tự ưu tiên

Trình duyệt hiện đại sẽ dùng opacity (chuẩn W3C). Các tiền tố -moz-, -khtml-, filter chỉ dùng cho trình duyệt cũ không hỗ trợ opacity chuẩn.

Lưu ý hiện nay

Hiện tại (2024+), chỉ cần opacity: 0.3 là đủ cho 99.9% người dùng. Các fallback khác chỉ cần nếu phải hỗ trợ IE8-.