ฟังก์ชัน brightness() ของ CSS

การกำหนดและการใช้งาน

CSS brightness() ฟังก์ชันตัวกรองใช้เพื่อปรับปรุงความสว่างขององค์ประกอบ

  • 0% จะทำให้ภาพเป็นดำทุกอย่าง
  • 100%（หรือ 1）เป็นค่าเริ่มต้นที่แสดงภาพเดิม
  • ค่าเกิน 100% จะทำให้ภาพสว่างขึ้น
  • ค่าต่ำกว่า 100% จะทำให้ภาพมืดลง

ตัวอย่าง

ตัวอย่าง 1

ทำให้ภาพมีสีสว่างขึ้นหรือมืดลงเมื่อเทียบกับภาพเดิม

#img1 {
  filter: brightness(150%);
}
#img2 {
  filter: brightness(50%);
}

ลองเทียบด้วยตัวเอง

ตัวอย่าง 2

ทำให้ brightness() กับ backdrop-filter ใช้ค่าต่อกัน

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: brightness(150%);
  backdrop-filter: brightness(150%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

ลองเทียบด้วยตัวเอง

CSS การเขียน

brightness(amount)
ค่า คำอธิบาย
amount

เลือกได้

0% จะทำให้องค์ประกอบแห่งนี้เป็นดำทุกอย่าง。100%（หรือ 1）เป็นค่าเริ่มต้น，แสดงภาพเดิม（ไม่มีผลกระทบ）

ค่าเกิน 100% จะทำให้ภาพแห่งนี้เปิดไฟ

รายละเอียดเทคนิค

เวอร์ชั่น： CSS Filter Effects Module Level 1

การสนับสนุนเบราเซอร์

ตัวเลขในตารางแสดงเวอร์ชั่นเบราเซอร์ที่สนับสนุนฟังก์ชันนี้ครบถ้วน

Chrome Edge Firefox Safari Opera
18 12 35 6 15

หน้าที่เกี่ยวข้อง

อ้างอิง:CSS ตัวกรอง

อ้างอิง:CSS blur() ฟังก์ชัน

อ้างอิง:ฟังก์ชัน contrast() ของ CSS

อ้างอิง:ฟังก์ชัน drop-shadow() ของ CSS

อ้างอิง:ฟังก์ชัน grayscale() ของ CSS

อ้างอิง:ฟังก์ชัน hue-rotate() ของ CSS

อ้างอิง:ฟังก์ชัน invert() ของ CSS

อ้างอิง:ฟังก์ชัน opacity() ของ CSS

อ้างอิง:CSS saturate() ฟังก์ชัน

อ้างอิง:CSS sepia() ฟังก์ชัน