CSS 마스크 리피트 속성

정의와 사용법

mask-repeat 속성은 마스크 이미지가 반복되는지 여부와 어떻게 반복되는지 정의합니다.

기본적으로, 마스크 이미지는 수직과 수평 방향으로 모두 반복됩니다.

예제

예제 1

사용 mask-repeat: no-repeat; 와 mask-repeat: repeat;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: repeat;
}

직접 시도해 보세요

예제 2

사용 mask-repeat: round; 와 mask-repeat: space;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: round;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: space;
}

직접 시도해 보세요

예제 3

사용 mask-repeat: repeat-x; 와 mask-repeat: repeat-y;:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-x;
}
.mask2 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 30%;
  mask-repeat: repeat-y;
}

직접 시도해 보세요

CSS 문법

mask-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

속성 값

값 설명
repeat

마스크 이미지는 수직과 수평 방향으로 모두 반복됩니다.

마지막 이미지가 적합하지 않으면 잘립니다.

이것은 기본 값입니다.
repeat-x 마스크 이미지는 수평 방향으로만 반복됩니다.
repeat-y 마스크 이미지는 수직 방향으로만 반복됩니다.
space

마스크 이미지는 가능한 한 많이 반복되며 잘리지 않습니다.

첫 번째 이미지와 마지막 이미지는 각각 요소의 양쪽에 고정되며, 이미지 간의 공백은 균일하게 분포됩니다.
round 마스크 이미지는 반복되며 공간을 채우기 위해 압축되거나 확장됩니다(간격 없음).
no-repeat 마스크 이미지는 반복되지 않습니다. 이미지는 한 번만 표시됩니다.
initial 이 속성을 기본 값으로 설정합니다. 참고: initial。
inherit 부모 요소에서 이 속성을 상속합니다. 참고: inherit。

기술 세부 사항

기본 값: repeat
상속성: 아니요
애니메이션 제작: 지원하지 않습니다. 참고:애니메이션 관련 속성。
버전: CSS Masking 모듈 레벨 1
JavaScript 문법: object.style.maskRepeat="no-repeat"

브라우저 지원

표格에 표시된 숫자는 이 속성을 최초로 완벽하게 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
120 120 53 15.4 106

관련 페이지

교본:CSS 셀렉터

참조:CSS 마스크 속성

참조:CSS 마스크 클립 속성

참조:CSS 마스크 컴포지트 속성

참조:CSS 마스크 이미지 속성

참조:CSS 마스크 모드 속성

참조:CSS 마스크 오리진 속성

참조:CSS 마스크 포지션 속성

참조:CSS 마스크 사이즈 속성

참조:CSS 마스크 타입 속성