การตั้งค่าความสว่างภาพด้วย CSS3 (Brightness Filter)

เพื่อตั้งค่าความสว่างของภาพใน CSS ให้ใช้ filter: brightness(%) จำไว้ว่า:

• ค่า 0% ทำให้ภาพสีดำทั้งหมด
• ค่า 100% เป็นภาพต้นฉบับ (ค่าเริ่มต้น)
• ค่า มากกว่า 100% จะทำให้ภาพสว่างขึ้น

ตัวอย่าง: brightness 120%

<!DOCTYPE html> <html> <head> <style> img.demo {    filter: brightness(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: brightness(percentage);

ค่าตัวอย่าง

filter: brightness(0%);     /* สีดำทั้งหมด */
filter: brightness(50%);    /* มืดกว่าต้นฉบับ */
filter: brightness(100%);   /* ภาพต้นฉบับ */
filter: brightness(150%);   /* สว่างขึ้น 1.5 เท่า */
filter: brightness(200%);   /* สว่างขึ้น 2 เท่า */

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

• Hover effect: สว่างขึ้นเมื่อ hover
• Dark mode: ลดความสว่างภาพในโหมดมืด
• Loading placeholder: ทำให้ภาพจางขณะโหลด
• Disabled state: ทำให้ปุ่ม/รูปภาพดู薄弱 (dimmed)

หมายเหตุ: สามารถใช้ค่าทศนิยมได้ เช่น brightness(1.2) เทียบเท่า brightness(120%)