Thuộc tính mix-blend-mode

Thuộc tính mix-blend-mode thiết lập chế độ pha trộn màu nguồn với màu nền hoặc hình nền. Các giá trị cho thuộc tính tương tự như các chế độ chính của các trình chỉnh sửa đồ họa.

Cú pháp

bộ chọn {
	mix-blend-mode: giá trị;
}

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

Giá trị

Giá trị	Mô tả
`normal`	Bình thường. Không sử dụng pha trộn màu. Chế độ mặc định.
`multiply`	Phép nhân. Trong chế độ này, giá trị màu chính được nhân với giá trị màu kết hợp. Màu kết quả luôn luôn là 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 chính và màu kết hợp được nhân với nhau. Màu kết quả luôn luôn là màu sáng hơn.
`overlay`	Phủ lên. Trong chế độ này, màu sắc được nhân hoặc làm sáng tùy thuộc vào màu chính. Họa tiết 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 chính.

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 mix-blend-mode:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: normal;
	width: 400px;
	height: 300px;
}

Ví dụ

Bây giờ hãy thay đổi chế độ pha trộn thành phép nhân:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: multiply;
	width: 400px;
	height: 300px;
}

Ví dụ

Hãy đặt giá trị phủ lên cho thuộc tính mix-blend-mode:

<div>
	<img src="bg.png">
</div>

div {
	background: #C8EAF5;
	width: 400px;
	height: 300px;
}
img {
	mix-blend-mode: overlay;
	width: 400px;
	height: 300px;
}

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,
giúp bạn có thể đặt hình nền cho một khối
thuộc tính background-blend-mode,
giúp bạn có thể phủ hình nền lên màu nền