home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

การปรับความอิ่มตัวของภาพด้วย CSS3 (Saturate Filter)

เพื่อปรับความอิ่มตัวของภาพด้วย CSS3 ให้ใช้ค่า saturate() สำหรับคุณสมบัติ filter

ตัวอย่าง: saturate 500%

<!DOCTYPE html> <html> <head> <style> img.demo {    filter: saturation(500%); } </style> </head> <body> <h1>Learn Spring Framework</h1> <img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150"> <h1>Learn Spring Framework</h1> <img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150"> </body> </html>

ผลลัพธ์

การปรับความอิ่มตัวของภาพด้วย CSS3 (Saturate Filter)

ไวยากรณ์ (Syntax)

filter: saturate(percentage);

ค่าตัวอย่าง

filter: saturate(0%);     /* ขาวดำสมบูรณ์ (ไม่มีสี) */
filter: saturate(50%);    /* สีจางลง */
filter: saturate(100%);   /* ภาพต้นฉบับ (ค่าเริ่มต้น) */
filter: saturate(200%);   /* สีสดใสขึ้น 2 เท่า */
filter: saturate(500%);   /* สีสดใสมาก 5 เท่า */

การประยุกต์ใช้

  • Hover effect: เพิ่มความอิ่มตัวเมื่อ hover
  • Grayscale to color: เริ่มจาก 0% แล้ว transition ไป 100%
  • Color grading: ปรับโทนสีภาพถ่าย
  • Disabled state: ลดความอิ่มตัวสำหรับปุ่มที่กดไม่ได้

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

filter: saturate(150%) contrast(120%) brightness(110%);

หมายเหตุ: ค่ามากกว่า 100% จะเพิ่มความอิ่มตัวเกินภาพต้นฉบับ ค่าติดลบไม่ได้