Thuộc tính mask-image

Thuộc tính mask-image cho phép đặt hình ảnh sẽ được sử dụng làm mặt nạ cho phần tử. Mặt nạ xác định phần nào của phần tử sẽ hiển thị và phần nào sẽ bị ẩn. Có thể sử dụng SVG, hình ảnh PNG hoặc gradient làm mặt nạ.

Cú pháp

bộ chọn {
	mask-image: none | <image> | <url>;
}

Giá trị

Giá trị	Mô tả
`none`	Tắt chức năng mặt nạ (giá trị mặc định).
`url()`	Đường dẫn đến hình ảnh mặt nạ (SVG, PNG).
`linear-gradient()`	Gradient tuyến tính làm mặt nạ.
`radial-gradient()`	Gradient xuyên tâm làm mặt nạ.

Ví dụ . Sử dụng SVG làm mặt nạ

Áp dụng hình ảnh SVG hình trái tim làm mặt nạ lên ảnh:

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

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: 300px;
	mask-repeat: no-repeat;
}

Ví dụ . Sử dụng gradient làm mặt nạ

Áp dụng gradient tuyến tính làm mặt nạ cho phần tử:

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

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask-image: linear-gradient(to right, transparent, black);
}

Ví dụ . Sử dụng phần tử SVG làm mặt nạ

Tạo mặt nạ bằng phần tử SVG và áp dụng nó cho hình ảnh:

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

#image {
	width: 500px;
	height: 281px;
	mask-image: url(#mask);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

Xem thêm

thuộc tính mask-position,
xác định vị trí của mặt nạ so với phần tử
thuộc tính mask-size,
xác định kích thước mặt nạ
thuộc tính mask-repeat,
xác định việc lặp lại mặt nạ
thuộc tính mask-mode,
xác định cách mặt nạ tương tác với nền
thuộc tính mask,
cách viết tắt cho tất cả các thuộc tính tạo mặt nạ