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

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

Ví dụ

Hãy đặt độ sáng cho hình ảnh của chúng ta là 20%:

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

#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%:

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

#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:

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

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

Xem thêm

hàm blur,
làm mờ nền
hàm contrast,
thiết lập độ tương phản cho nền
hàm drop-shadow,
thiết lập bóng đổ cho nền
hàm hue-rotate,
thiết lập màu sắc cho nền
hàm invert,
đảo ngược màu sắc nền
hàm opacity,
thiết lập độ trong suốt cho nền
hàm sepia,
chuyển đổi nền thành sepia
thuộc tính background,
là thuộc tính viết tắt cho nền
thuộc tính background-image,
dùng để đặt hình nền cho một phần tử
thuộc tính filter,
thiết lập kiểu cho nền