Thuộc tính mask-position
Thuộc tính mask-position thiết lập vị trí ban đầu của mặt nạ so với phần tử.
Hoạt động tương tự background-position, nhưng áp dụng cho mặt nạ.
Cú pháp
bộ chọn {
mask-position: <vị trí>;
}
Giá trị
| Giá trị | Mô tả |
|---|---|
top left |
Ở góc trên bên trái (mặc định). |
center |
Ở giữa phần tử. |
50% 50% |
Tương tự center. |
right bottom |
Ở góc dưới bên phải. |
100px 200px |
Tọa độ cụ thể bằng pixel. |
Ví dụ . Căn giữa mặt nạ
Mặt nạ hình trái tim ở giữa hình ảnh:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Ví dụ . Góc trên bên trái
Mặt nạ ở góc trên bên trái:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Ví dụ . Góc dưới bên phải
Mặt nạ ở góc dưới bên phải:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Ví dụ . Tọa độ chính xác
Mặt nạ được định vị theo tọa độ chính xác:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Ví dụ . Định vị theo phần trăm
Định vị mặt nạ bằng phần trăm:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
Xem thêm
-
thuộc tính
mask-size,
xác định kích thước mặt nạ -
thuộc tính
mask-origin,
xác định điểm tham chiếu để định vị -
thuộc tính
mask,
cách viết tắt cho tất cả các thuộc tính che mặt nạ
