mask-repeat 속성

mask-repeat 속성은 마스크의 크기가 요소의 크기보다 작을 때 마스크를 반복하는 방식을 지정합니다. background-repeat와 유사하게 동작하지만, 마스크에 적용됩니다.

문법

css선택자 {
  mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}

값

예제 . 반복 없음 (no-repeat)

중앙에 하나의 하트, 반복 없음:

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;
}

Результат:

예제 . 수평 반복 (repeat-x)

하트가 수평으로만 반복됩니다:

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;
}

Результат:

예제 . 수직 반복 (repeat-y)

하트가 수직으로만 반복됩니다:

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;
}

Результат:

예제 . 간격을 둔 반복 (space)

하트가 간격을 두고 균등하게 분배됩니다:

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

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

Результат:

예제 . 크기 조정 반복 (round)

하트가 균일하게 채워지도록 크기가 조정됩니다:

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

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

Результат:

함께 보기