Thuộc tính background-blend-mode

Thuộc tính background-blend-mode thiết lập chế độ hòa trộn hình ảnh nền với màu nền hoặc các hình ảnh khác. Trong thuộc tính này cũng có thể chỉ định nhiều giá trị phân cách bằng dấu phẩy, chúng sẽ được áp dụng theo đúng thứ tự đó. Các giá trị cho thuộc tính tương tự như các chế độ chính trong phần mềm chỉnh sửa đồ họa.

Cú pháp

bộ-chọn {
	background-blend-mode: chế-độ;
}

Bảng dưới đây trình bày các giá trị chính cho thuộc tính background-blend-mode:

Giá trị

Giá trị	Mô tả
`normal`	Bình thường. Không sử dụng pha trộn màu sắc. Chế độ mặc định.
`multiply`	Nhân. Trong chế độ này, giá trị màu gốc được nhân với giá trị màu phủ lên. Màu sắc kết quả luôn là một màu tối hơn.
`screen`	Làm sáng. Trong chế độ này, các giá trị nghịch đảo của màu gốc và màu phủ lên được nhân với nhau. Màu kết quả luôn luôn là một màu sáng hơn.
`overlay`	Phủ. Trong chế độ này, màu sắc được nhân lên hoặc làm sáng lên tùy thuộc vào màu gốc. Các hoa văn hoặc màu sắc phủ lên các điểm ảnh hiện có, giữ nguyên các vùng sáng và tối của màu gốc.

Ví dụ

Hãy xem hình ảnh sẽ trông như thế nào với giá trị mặc định của thuộc tính background-blend-mode:

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

#elem {
	background-blend-mode: normal;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ví dụ

Bây giờ hãy thay đổi giá trị thuộc tính background-blend-mode thành nhân:

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

#elem {
	background-blend-mode: multiply;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ví dụ

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

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

#elem {
	background-blend-mode: screen;
	background: url("bg.png") center / cover no-repeat,
	linear-gradient(#00A8DE, #FFF) fixed;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Xem thêm

thuộc tính background,
là một thuộc tính viết tắt cho nền
thuộc tính background-image,
dùng để đặt hình ảnh nền cho một khối
thuộc tính mix-blend-mode,
dùng để phủ màu gốc lên hình ảnh nền
thuộc tính backdrop-filter,
cho phép áp dụng các bộ lọc