Hiệu ứng Invert (Đảo ngược màu) với CSS Filter (Legacy)

Bộ lọc Invert - Microsoft Legacy Filter

Cảnh báo: Filter: Invert là **Microsoft proprietary filter (IE 4-9)**, **đã lỗi thời** và **không hoạt động** trên trình duyệt hiện đại.

Tham số cũ (chỉ IE)

Thay thế hiện đại: CSS filter: invert()

Dùng chuẩn CSS Filter Effects Module Level 1 - hỗ trợ đầy đủ:

Cú pháp chuẩn

.invert-full { filter: invert(100%); }   /* Đảo ngược hoàn toàn */
.invert-half { filter: invert(50%); }    /* Đảo ngược 50% */
.invert-custom { filter: invert(75%); }  /* Tùy chỉnh mức độ */

Ví dụ hoàn chỉnh hiện đại

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo { width: 300px; margin: 20px; display: inline-block; }
    .original { filter: none; }
    .invert-100 { filter: invert(100%); }
    .invert-50 { filter: invert(50%); }
    
    /* Áp dụng cho text */
    .text-invert {
      display: inline-block;
      filter: invert(100%);
      font: 30pt 'Arial Black';
      color: red;
    }
  </style>
</head>
<body>
  <img src="logo.png" alt="Gốc" class="demo original">
  <img src="logo.png" alt="Invert 100%" class="demo invert-100">
  <img src="logo.png" alt="Invert 50%" class="demo invert-50">
  
  <p>Text Example:</p>
  <div class="text-invert">CSS Tutorials</div>
</body>
</html>

Kết hợp với các filter khác

.advanced-filter {
  filter: invert(100%) hue-rotate(180deg) brightness(1.2) contrast(1.5);
  /* Chuỗi filter: áp dụng theo thứ tự */
}

Hỗ trợ trình duyệt

• Chrome 53+, Firefox 35+, Safari 9.1+, Edge 12+
• Cần prefix -webkit-filter cho Safari cũ
• Không hỗ trợ IE (dùng polyfill hoặc fallback)