วิธีทำภาพขาวดำ (Black & White Image) ด้วย CSS Filter

CSS filter: grayscale() ทำให้ภาพสีกลายเป็นขาวดำ (Grayscale) ได้ทันที ไม่ต้องแก้ไขไฟล์ภาพต้นฉบับ รองรับค่าระหว่าง 0% (สีปกติ) ถึง 100% (ขาวดำสมบูรณ์) และสามารถ Transition/Animate ได้

Syntax

selector {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* Safari 旧版本 */
}

ตัวอย่างที่ 1: สลับภาพสี/ขาวดำ แบบ nth-child

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      margin: 2%;
      border-radius: 25%;
    }
    img:nth-of-type(even) {
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
    }
  </style>
</head>
<body>
  <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
  <img src="https://images.unsplash.com/photo-1611825715408-826f2b19c43f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" alt="img from unsplash">
</body>
</html>

ผลลัพธ์: รูปที่ 1 (Odd) = สีปกติ, รูปที่ 2 (Even) = ขาวดำ

ตัวอย่างที่ 2: ภาพคู่ Odd/Even สลับกัน

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      margin: 2%;
    }
    img:nth-of-type(odd) {
      filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
    }
  </style>
</head>
<body>
  <img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
  <img src="https://images.unsplash.com/photo-1611781750917-8777ab68668a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256">
</body>
</html>

Filter Functions อื่นๆ ที่น่าสนใจ

รวมหลาย Filters (Chaining)

.vintage-photo {
  filter: sepia(60%) contrast(120%) brightness(90%) grayscale(20%);
}

.dramatic-bw {
  filter: grayscale(100%) contrast(150%) brightness(110%);
}

.hover-reveal-color {
  filter: grayscale(100%) contrast(120%);
  transition: filter 0.4s ease;
}
.hover-reveal-color:hover {
  filter: grayscale(0%) contrast(100%);
}

Hover Reveal Color Effect (นิยมมาก)

<figure class="bw-reveal">
  <img src="photo.jpg" alt="Description">
  <figcaption>Hover to reveal color</figcaption>
</figure>

Performance & Best Practices

• GPU Acceleration: Filter ทำงานบน GPU (Compositor Thread) เร็วกว่า JavaScript/Canvas
• Will-change: ใช้ will-change: filter สำหรับ Element ที่ Animate บ่อย
• Backface-visibility: ป้องกัน Flicker บาง Browser: backface-visibility: hidden
• SVG Filters: สำหรับ Effect ซับซ้อนกว่า ใช้ filter: url(#svg-filter)
• Print Stylesheet: เพิ่ม filter: grayscale(100%) ใน @media print เพื่อประหยัดหมึก