mask-repeat 속성
mask-repeat 속성은 마스크의 크기가 요소의 크기보다 작을 때 마스크를 반복하는 방식을 지정합니다.
background-repeat와 유사하게 동작하지만,
마스크에 적용됩니다.
문법
선택자 {
mask-repeat: repeat-x | repeat-y | repeat | space | round | no-repeat;
}
값
| 값 | 설명 |
|---|---|
repeat |
마스크가 양축으로 반복됩니다 (기본값). |
no-repeat |
마스크가 반복되지 않습니다. |
repeat-x |
마스크가 수평으로만 반복됩니다. |
repeat-y |
마스크가 수직으로만 반복됩니다. |
space |
마스크가 균등한 간격으로 반복됩니다. |
round |
마스크가 균일하게 채워지도록 크기가 조정됩니다. |
예제 . 반복 없음 (no-repeat)
중앙에 하나의 하트, 반복 없음:
<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;
}
:
예제 . 수평 반복 (repeat-x)
하트가 수평으로만 반복됩니다:
<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;
}
:
예제 . 수직 반복 (repeat-y)
하트가 수직으로만 반복됩니다:
<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;
}
:
예제 . 간격을 둔 반복 (space)
하트가 간격을 두고 균등하게 분배됩니다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: space;
}
:
예제 . 크기 조정 반복 (round)
하트가 균일하게 채워지도록 크기가 조정됩니다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-size: 80px;
mask-repeat: round;
}
:
함께 보기
-
mask-size속성,
마스크의 크기를 정의합니다 -
mask-position속성,
마스크의 위치를 설정합니다 -
mask속성,
모든 마스킹 속성을 위한 단축 속성
