CSS Mask Effect: สลับโปร่งใส/ทึบ (Legacy IE Filter)

Mask Effect (IE Legacy)

เอฟเฟกต์ Mask เป็นฟิลเตอร์เก่าของ Internet Explorer ทำให้พิกเซลโปร่งใสกลายเป็นสีที่กำหนด และพิกเซลทึบกลายเป็นโปร่งใส (กลับกันกับปกติ)

พารามิเตอร์

ตัวอย่างการใช้งาน

<html>
<head></head>
<body>
  <img src="/css/images/logo.png" alt="CSS Logo" 
    style="filter: chroma(color=#000000) mask(color=#00FF00)">
  
  <p>Text Example:</p>
  <div style="
    width: 357px; height: 50px;
    font-size: 30pt; font-family: Arial Black;
    color: red; filter: mask(color=#00FF00)
  ">CSS Tutorials</div>
</body>
</html>

⚠️ สำคัญ: เฉพาะ Internet Explorer

เป็น Microsoft proprietary filter ไม่ใช่มาตรฐาน W3C

ทางเลือกมาตรฐาน (Modern CSS)

1. CSS mask-image

.mask-image {
  mask-image: url(mask.png);  /* PNG ที่มี alpha channel */
  mask-mode: alpha;           /* ใช้ alpha channel */
  -webkit-mask-image: url(mask.png);
  -webkit-mask-mode: alpha;
}

2. CSS clip-path

.clip-circle { clip-path: circle(50%); }
.clip-polygon { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.clip-ellipse { clip-path: ellipse(50% 25% at 50% 50%); }

3. SVG Mask (ยืดหยุ่นที่สุด)

.masked {
  mask: url(#svg-mask);
  -webkit-mask: url(#svg-mask);
}

4. Background Clip Text (Text Masking)

.text-mask {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}