Hàm brightness

Hàm brightness cho phép thay đổi độ sáng của hình nền. Độ sáng gốc của nền được xác định bằng giá trị 100% hoặc 1, khi giảm các giá trị này thì độ sáng của hình ảnh cũng giảm. Tương ứng, khi tăng giá trị vượt quá 100% thì độ sáng sẽ tăng lên. Các giá trị âm không được áp dụng, và giá trị rỗng sẽ tự động được hiểu là 1.

Cú pháp

cssbộ chọn {
  filter: brightness(số);
}

Ví dụ

Hãy đặt độ sáng cho hình ảnh của chúng ta là 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;
}

Результат:

Ví dụ

Bây giờ hãy tăng độ sáng của hình ảnh lên 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;
}

Результат:

Ví dụ

Hãy đặt độ sáng gốc cho hình ảnh của chúng ta:

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;
}

Результат:

Xem thêm