Bộ lọc CSS Chroma Filter (làm trong suốt màu)

Bộ lọc Chroma (Chroma Filter) - CSS Legacy

Lưu ý quan trọng: Chroma Filter là **bộ lọc Microsoft proprietary (IE 4-9)**, **không phải CSS chuẩn**. Nó đã **bị loại bỏ** và **không được hỗ trợ** trên trình duyệt hiện đại (Chrome, Firefox, Edge, Safari).

Cú pháp cũ (chỉ IE)

<img src="logo.png" style="filter: chroma(color=#FFFFFF)">
/* Làm trong suốt màu trắng (#FFFFFF) */

Thay thế hiện đại (CSS Standards)

Thay vì Chroma Filter, hãy dùng các tiêu chuẩn web hiện đại:

1. mix-blend-mode (CSS Compositing)

.chroma-key {
  mix-blend-mode: screen; /* Hoặc multiply, difference tùy màu nền */
  /* Kết hợp với background để tạo hiệu ứng chroma key */
}

2. CSS Masking (clip-path, mask-image)

.transparent-color {
  /* Làm trong suốt một màu cụ thể - cần SVG mask hoặc canvas */
  mask-image: url('mask.svg');
}

3. Canvas API (JavaScript) - Chroma Key thực sự

<canvas id="canvas"></canvas>
<script>
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = 'photo.jpg';
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (let i = 0; i < data.length; i += 4) {
      const r = data[i], g = data[i+1], b = data[i+2];
      // Làm trong suốt màu xanh lá (#00FF00) với ngưỡng dung sai
      if (r < 50 && g > 200 && b < 50) data[i+3] = 0;
    }
    ctx.putImageData(imageData, 0, 0);
  };
</script>

4. Video Chroma Key (Green Screen) - WebCodecs API

Đối với video, dùng WebCodecs API hoặc WebGL shader để real-time chroma key.

Kết luận

Không sử dụng Chroma Filter trong dự án hiện đại. Đây là công nghệ lỗi thời chỉ dành cho IE cũ. Hãy dùng CSS Masking, Canvas, hoặc WebGL cho hiệu ứng chroma key/green screen thực sự.