Thuộc tính mask-mode

Thuộc tính mask-mode thiết lập cách thức tương tác của mặt nạ với nền của phần tử. Nó xác định liệu mặt nạ sẽ sử dụng kênh alpha (độ trong suốt) hay các giá trị độ sáng (luminance) của hình ảnh mặt nạ.

Cú pháp

bộ chọn {
	mask-mode: alpha | luminance | match-source;
}

Giá trị

Giá trị	Mô tả
`alpha`	Mặt nạ chỉ sử dụng kênh alpha (độ trong suốt) của hình ảnh.
`luminance`	Mặt nạ sử dụng các giá trị độ sáng của hình ảnh (trắng = hiển thị, đen = trong suốt).
`match-source`	Đối với hình ảnh sử dụng kênh alpha, đối với SVG - luminance (giá trị mặc định).

Ví dụ . Chế độ alpha

Áp dụng mặt nạ SVG ở chế độ alpha:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
	mask-mode: alpha;
}

Ví dụ . Chế độ luminance

Áp dụng mặt nạ SVG ở chế độ luminance:

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

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
	mask-mode: luminance;
}

Ví dụ . Mặt nạ SVG với chế độ match-source

Sử dụng giá trị mặc định (match-source) cho SVG:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="svg-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	mask: url(#svg-mask);
	mask-mode: match-source;
}

Ví dụ . Tổ hợp với các chế độ khác nhau

Kết hợp các mặt nạ với các chế độ hòa trộn khác nhau:

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

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

Xem thêm

thuộc tính mask-image,
chỉ định hình ảnh cho mặt nạ
thuộc tính mask-composite,
xác định sự tương tác của nhiều mặt nạ
thuộc tính mask,
viết tắt cho tất cả các thuộc tính mặt nạ