Thuộc tính mask-composite

Thuộc tính mask-composite cho phép kết hợp nhiều mặt nạ được áp dụng cho một phần tử. Nó xác định các mặt nạ khác nhau sẽ tương tác với nhau như thế nào khi chồng lên nhau.

Cú pháp

bộ chọn {
	mask-composite: <toán-tử-tổng-hợp>#;
}

Giá trị

Giá trị	Mô tả
`add`	Kết quả là sự hợp nhất của tất cả các mặt nạ (mặc định).
`subtract`	Mặt nạ thứ hai được trừ khỏi mặt nạ đầu tiên.
`intersect`	Chỉ hiển thị vùng giao nhau của các mặt nạ.
`exclude`	Hiển thị các vùng không chung cho tất cả các mặt nạ.

Ví dụ . Chế độ add

Hợp nhất hai mặt nạ (hình trái tim và mũi tên):

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		200px 30px;
	mask-size: 150px;
	mask-repeat: no-repeat;
	mask-composite: add;
}

Ví dụ . Chế độ subtract

Trừ mũi tên khỏi hình trái tim:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		170px 80px;
	mask-size: 
		250px,
		120px;
	mask-repeat: no-repeat;
	mask-composite: subtract;
}

Ví dụ . Chế độ intersect

Chỉ hiển thị vùng giao nhau của các mặt nạ:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		50px 30px;
	mask-size: 150px;
	mask-repeat: no-repeat;
	mask-composite: intersect;
}

Ví dụ . Chế độ exclude

Hiển thị các vùng không chung cho tất cả:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: 
		url("heart.svg"),
		url("arrow.svg");
	mask-position: 
		100px 50px,
		50px 30px;
	mask-size: 150px;
	mask-repeat: no-repeat;
	mask-composite: exclude;
}

Ví dụ . Kết hợp với gradient

Sử dụng với mặt nạ gradient:

<div id="gradient-box"></div>

#gradient-box {
	width: 400px;
	height: 400px;
	background: linear-gradient(45deg, red, yellow, green, blue);
	mask-image: 
		radial-gradient(circle at 30% 30%, black 40%, transparent 70%),
		radial-gradient(circle at 70% 70%, black 40%, transparent 70%);
	mask-composite: exclude;
}

Xem thêm

thuộc tính mask-image,
thiết lập hình ảnh cho mặt nạ
thuộc tính mask,
cú pháp viết tắt cho tất cả các thuộc tính che mặt nạ
thuộc tính mask-mode,
xác định chế độ hòa trộn mặt nạ
thuộc tính mix-blend-mode,
xác định chế độ hòa trộn của các phần tử