เพื่อตั้งค่าคอนทราสต์ของภาพใน CSS ให้ใช้ filter: contrast(%) จำไว้ว่า:
- ค่า 0% ทำให้ภาพสีดำทั้งหมด
- ค่า 100% เป็นภาพต้นฉบับ (ค่าเริ่มต้น)
- ค่า มากกว่า 100% จะทำให้ภาพมีคอนทราสต์มากขึ้น
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> img.demo { filter: brightness(120%); filter: contrast(120%); } </style> </head> <body> <h1>Learn MySQL</h1> <img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> <h1>Learn MySQL</h1> <p>ภาพด้านล่างสว่างขึ้นและมีคอนทราสต์มากกว่าภาพต้นฉบับด้านบน</p> <img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150"> </body> </html>
ผลลัพธ์
ไวยากรณ์ (Syntax)
filter: contrast(percentage);
ตัวอย่างค่าต่างๆ
filter: contrast(0%); /* สีดำทั้งหมด */ filter: contrast(50%); /* คอนทราสต์ต่ำ */ filter: contrast(100%); /* ภาพต้นฉบับ */ filter: contrast(150%); /* คอนทราสต์สูง */ filter: contrast(200%); /* คอนทราสต์สูงมาก */
หมายเหตุ: สามารถรวมกับ filter อื่นๆ ได้ เช่น brightness(), saturate() โดยคั่นด้วยช่องว่าง
