Thuộc tính mask-origin

Thuộc tính mask-origin thiết lập điểm gốc để định vị mặt nạ. Nó xác định phần nào của phần tử (đường viền, phần đệm hay nội dung) mà mặt nạ sẽ được đặt tương đối.

Cú pháp

bộ chọn {
	mask-origin: content-box | padding-box | border-box;
}

Giá trị

Giá trị	Mô tả
`border-box`	Mặt nạ được định vị tương đối với đường viền của phần tử (bao gồm border).
`padding-box`	Mặt nạ được định vị tương đối với vùng padding (mặc định).
`content-box`	Mặt nạ được định vị tương đối với nội dung của phần tử.

Ví dụ . border-box

Mặt nạ được định vị tương đối với đường viền của phần tử:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: border-box;
}

Ví dụ . padding-box

Mặt nạ được định vị tương đối với vùng phần đệm:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: padding-box;
}

Ví dụ . content-box

Mặt nạ được định vị tương đối với nội dung:

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

#image {
	width: 500px;
	height: 281px;
	padding: 20px;
	border: 30px dashed rgba(0,0,0,0.3);
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 200px;
	mask-repeat: no-repeat;
	mask-origin: content-box;
}

Xem thêm

thuộc tính mask-clip,
xác định vùng cắt của mặt nạ
thuộc tính mask-position,
thiết lập vị trí của 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 mặt nạ
thuộc tính background-origin,
thuộc tính tương tự cho hình nền của phần tử