Hiệu ứng Mask (Mặt nạ) với CSS Filter (Legacy)

Bộ lọc Mask - Microsoft Legacy Filter

Cảnh báo: Filter: Mask(...) là **Microsoft proprietary filter (IE 4-9)**, **đã lỗi thời**.

Tham số cũ (chỉ IE)

Thay thế hiện đại: CSS Masking Module

CSS chuẩn cung cấp mask-image, mask-mode, clip-path cho masking mạnh mẽ hơn:

1. mask-image (hình ảnh/gradient làm mask)

.mask-image {
  mask-image: url('mask.png');           /* PNG alpha channel làm mask */
  mask-image: linear-gradient(black, transparent); /* Gradient mask */
  mask-mode: alpha;                     /* Dùng kênh alpha (mặc định) */
  mask-mode: luminance;                 /* Dùng độ sáng */
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}

2. clip-path (cắt theo hình dạng)

.clip-circle { clip-path: circle(50% at center); }
.clip-polygon { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.clip-ellipse { clip-path: ellipse(50% 30% at 50% 50%); }
.clip-inset { clip-path: inset(20px 30px 40px 10px round 10px); }

3. SVG Mask (mạnh mẽ nhất)

<svg style="display:none">
  <mask id="svg-mask">
    <rect width="100%" height="100%" fill="white" />
    <circle cx="50%" cy="50%" r="30%" fill="black" /> /* Lỗ tròn trong giữa */
  </mask>
</svg>

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo { width: 300px; height: 200px; background: #4CAF50; margin: 20px; display: inline-block; }
    
    .mask-gradient {
      mask-image: linear-gradient(to bottom, black 50%, transparent);
      -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent);
    }
    
    .mask-circle {
      -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent);
      mask-image: radial-gradient(circle at center, black 40%, transparent);
    }
    
    .clip-heart {
      clip-path: path('M150,50 C100,0 0,100 150,200 C300,100 200,0 150,50');
    }
  </style>
</head>
<body>
  <div class="demo mask-gradient">Gradient mask (fade bottom)</div>
  <div class="demo mask-circle">Radial mask (vignette)</div>
  <div class="demo clip-heart" style="background: #E91E63;">Clip-path heart</div>
</body>
</html>

Hỗ trợ trình duyệt

• mask-image: Chrome 4+, Firefox 53+, Safari 4+ (cần -webkit-), Edge 79+
• clip-path: Chrome 55+, Firefox 54+, Safari 10+, Edge 79+
• IE: Không hỗ trợ (cần polyfill hoặc fallback)