Thuộc tính lặp lại mặt nạ CSS
Ví dụ
Sử dụng mask-repeat: no-repeat;
và mask-repeat: repeat;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 50%;
mask-size: 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.mask2 {
-webkit-mask-image:
url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size:
50%;
mask-size: 50%;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính mask-repeat
đặt nếu/cách lặp lại hình ảnh mặt nạ.
Theo mặc định, hình ảnh mặt nạ được lặp lại theo cả chiều dọc và chiều ngang.
Giá trị mặc định: | lặp lại |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.maskRepeat="no-repeat" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau -webkit- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
mask-repeat | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 3.1 -webkit- | 15.0 -webkit- |
Cú pháp CSS
mask-repeat:
repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
repeat | The mask image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default |
repeat-x | The mask image is repeated only horizontally |
repeat-y | The mask image is repeated only vertically |
space | The mask image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images |
round | The mask image is repeated and squished or stretched to fill the space (no gaps) |
no-repeat | The mask image is not repeated. The image will only be shown once |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Sử dụng mask-repeat: round;
và mask-repeat: space;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: round;
mask-repeat:
round;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: space;
mask-repeat:
space;
}
Hãy tự mình thử »Ví dụ
Sử dụng mask-repeat: repeat-x;
và mask-repeat: repeat-y;
:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-x;
mask-repeat:
repeat-x;
}
.mask2 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 30%;
mask-size: 30%;
-webkit-mask-repeat: repeat-y;
mask-repeat:
repeat-y;
}
Hãy tự mình thử »Trang liên quan
Tham chiếu CSS: thuộc tính hình ảnh mặt nạ
Tham chiếu CSS: thuộc tính chế độ mặt nạ
Tham chiếu CSS: thuộc tính mặt nạ gốc
Tham chiếu CSS: thuộc tính vị trí mặt nạ
Tham chiếu CSS: thuộc tính kích thước mặt nạ
Hướng dẫn CSS: Mặt nạ CSS