Thuộc tính mask-repeat
Thuộc tính mask-repeat xác định cách lặp lại mặt nạ nếu kích thước của nó nhỏ hơn kích thước phần tử.
Hoạt động tương tự như background-repeat,
nhưng được áp dụng cho mặt nạ.
Cú pháp
bộ chọn {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
Giá trị
| Giá trị | Mô tả |
|---|---|
repeat |
Mặt nạ được lặp lại trên cả hai trục (mặc định). |
no-repeat |
Mặt nạ không được lặp lại. |
repeat-x |
Mặt nạ chỉ lặp lại theo chiều ngang. |
repeat-y |
Mặt nạ chỉ lặp lại theo chiều dọc. |
space |
Mặt nạ được lặp lại với các khoảng cách đều nhau. |
round |
Mặt nạ được thu phóng để lấp đầy đều. |
Ví dụ . Không lặp lại (no-repeat)
Một trái tim ở trung tâm không lặp lại:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 100px;
mask-repeat: no-repeat;
}
:
Ví dụ . Lặp lại theo chiều ngang (repeat-x)
Các trái tim chỉ lặp lại theo chiều ngang:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left center;
mask-size: 50px;
mask-repeat: repeat-x;
}
:
Ví dụ . Lặp lại theo chiều dọc (repeat-y)
Các trái tim chỉ lặp lại theo chiều dọc:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center top;
mask-size: 50px;
mask-repeat: repeat-y;
}
:
Ví dụ . Lặp lại với khoảng cách (space)
Các trái tim được phân bố đều với khoảng cách:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
Ví dụ . Lặp lại có thu phóng (round)
Các trái tim được thu phóng để lấp đầy đều:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
Xem thêm
-
thuộc tính
mask-size,
xác định kích thước 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ạ
