CSS Chroma Filter: ทำสีใส่ได้ (Legacy IE Filter)

Chroma Filter (IE Legacy)

Chroma Filter เป็นฟิลเตอร์เก่าของ Internet Explorer (IE 4-9) ใช้ทำให้สีที่กำหนดกลายเป็นโปร่งใส (transparent) ใช้บ่อยกับรูปภาพและสกролลบาร์

รูปแบบการใช้งาน

filter: chroma(color=#RRGGBB);

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

<html>
<head></head>
<body>
  <img src="/images/css.gif" alt="CSS Logo" style="filter: chroma(color=#FFFFFF)">
  
  <p>Text Example:</p>
  <div style="
    width: 580px; height: 50px;
    font-size: 30pt; font-family: Arial Black;
    color: #3300FF;
    filter: chroma(color=#3300FF)
  ">CSS Tutorials</div>
</body>
</html>

คำอธิบายตัวอย่าง

• รูปภาพ: สีขาว (#FFFFFF) จะกลายเป็นโปร่งใส
• ข้อความ: สีฟ้า (#3300FF) จะกลายเป็นโปร่งใส ทำให้เหลือเฉพาะส่วนที่ไม่ใช่สีนั้น

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

Chroma Filter เป็น Microsoft proprietary filter ไม่ใช่มาตรฐาน W3C ไม่ทำงานใน Chrome, Firefox, Safari, Edge

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

/ ทำให้สีขาวโปร่งใสด้วย mix-blend-mode /
.chroma-white {
  background: white;
  mix-blend-mode: multiply; /* หรือ screen ตามลำดับชั้น */
}

/* หรือใช้ SVG filter */


/* หรือ clip-path สำหรับรูปทรง */
.modern-chroma {
  -webkit-mask-image: url(mask.png);
  mask-image: url(mask.png);
}

สรุป

Chroma Filter เป็นเทคโนโลยีเก่า (Legacy) สำหรับ IE เท่านั้น ควรใช้ CSS มาตรฐาน เช่น mix-blend-mode, mask-image, clip-path หรือ SVG Filter แทน