การแปลงภาพเป็นขาวดำด้วย CSS3 (Grayscale Filter)

เพื่อแปลงภาพเป็นขาวดำ (Grayscale) ใน CSS3 ให้ใช้ค่า grayscale() สำหรับคุณสมบัติ filter

ตัวอย่าง: grayscale 130% พร้อม brightness และ contrast

<!DOCTYPE html> <html> <head> <style> img.demo {    filter: brightness(120%);    filter: contrast(120%);    filter: grayscale(130%); } </style> </head> <body> <h1>Spring Framework</h1> <img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150"> <h1>Learn MySQL</h1> <p>ภาพด้านล่างสว่างขึ้น คอนทราสต์สูงขึ้น และเป็นขาวดำ:</p> <img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150"> </body> </html>

ผลลัพธ์

ไวยากรณ์ (Syntax)

filter: grayscale(percentage);

ค่าตัวอย่าง

filter: grayscale(0%);    /* สีเต็ม (ค่าเริ่มต้น) */
filter: grayscale(50%);   /* ครึ่งขาวดำ ครึ่งสี */
filter: grayscale(100%);  /* ขาวดำสมบูรณ์ */
filter: grayscale(130%);  /* ขาวดำ + เพิ่มคอนทราสต์ (clamp ที่ 100%) */

การรวมกับ filter อื่นๆ

/* เขียนรวมในบรรทัดเดียว (แนะนำ) */
filter: grayscale(100%) brightness(120%) contrast(110%);

/* หรือแยกบรรทัด (ค่าต่อท้ายชนะถ้าซ้ำ) */
filter: grayscale(100%);
filter: brightness(120%);
filter: contrast(110%);

หมายเหตุ: ค่ามากกว่า 100% จะถูก clamp เป็น 100% (ขาวดำสมบูรณ์) ค่าติดลบไม่ได้