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ạ