การปรับความทึบแสงภาพด้วย CSS3 (Opacity Filter)

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

ตัวอย่าง: opacity 60%

<!DOCTYPE html> <html> <head> <style> img.demo {    filter: opacity(60%); } </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>

ผลลัพธ์

ไวยากรณ์ (Syntax)

filter: opacity(percentage);

ค่าตัวอย่าง

filter: opacity(0%);    /* โปร่งใสหมด (มองไม่เห็น) */
filter: opacity(25%);   /* ทึบ 25% */
filter: opacity(50%);   /* ทึบครึ่ง */
filter: opacity(75%);   /* ทึบ 75% */
filter: opacity(100%);  /* ทึบเต็มที่ (ค่าเริ่มต้น) */

ความแตกต่าง: filter:opacity() vs opacity property

แนะนำ: ใช้ filter: opacity() เมื่อต้องการรวมกับ filter อื่นๆ หรือต้องการเฉพาะองค์ประกอบตัวเอง ไม่รวมลูก