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

cssbộ chọn {
  mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

Giá trị

Ví dụ . Không lặp lại (no-repeat)

Một trái tim ở trung tâm không lặp lại:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-size: 80px;
  mask-repeat: round;
}

Результат:

Xem thêm