ฟังก์ชัน brightness

ฟังก์ชัน brightness ช่วยให้สามารถปรับเปลี่ยน ความสว่างของภาพพื้นหลังได้ ความสว่างเริ่มต้นของ พื้นหลังกำหนดโดยค่า 100% หรือ 1 เมื่อลดค่านี้ลง ความสว่างของภาพก็จะลดลงตาม ในทางตรงกันข้าม หากเพิ่มค่ามากกว่า 100% ความสว่างก็จะเพิ่มขึ้น ไม่สามารถใช้ค่าลบได้ และหากค่าถูกปล่อยว่างไว้จะถูกตีความอัตโนมัติ เป็น 1

ไวยากรณ์

cssselector {
  filter: brightness(number);
}

ตัวอย่าง

มาลองตั้งค่าความสว่างให้กับภาพของเรา ที่ 20% กัน:

html<div id="elem"></div>

css#elem {
  filter: brightness(20%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

และตอนนี้ลองเพิ่มความสว่างของภาพ เป็น 120% กัน:

html<div id="elem"></div>

css#elem {
  filter: brightness(120%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ตัวอย่าง

มาลองตั้งค่าความสว่างเริ่มต้น ให้กับภาพของเรากัน:

html<div id="elem"></div>

css#elem {
  filter: brightness(1);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

ดูเพิ่มเติม