속성 mask-size
mask-size 속성은 마스크 이미지의 크기를 설정합니다. 픽셀/백분율로 구체적인 크기를 설정하거나 cover와 contain 키워드를 사용할 수 있습니다.
문법
선택자 {
mask-size: auto | <length> | <percentage> | cover | contain;
}
값
| 값 | 설명 |
|---|---|
auto |
이미지의 원본 크기 (기본값). |
cover |
비율을 유지하면서 요소를 완전히 덮도록 마스크를 확대/축소합니다. |
contain |
비율을 유지하면서 요소 안에 완전히 들어오도록 마스크를 확대/축소합니다. |
100px 50px |
픽셀 단위의 구체적 크기. |
50% 100% |
요소 크기 대비 백분율 크기. |
예제 . cover 크기
마스크가 요소를 완전히 덮도록 확대/축소됩니다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: cover;
mask-repeat: no-repeat;
}
:
예제 . contain 크기
마스크가 요소 안에 완전히 들어오도록 확대/축소됩니다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
예제 . 픽셀 단위 고정 크기
150×150 픽셀 크기의 마스크:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
예제 . 백분율 크기
마스크가 요소 너비의 80%, 높이의 60%를 차지합니다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 80% 60%;
mask-repeat: no-repeat;
}
:
예제 . 축별 다른 크기
너비 200px, 높이 100px 마스크:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 200px 100px;
mask-repeat: no-repeat;
}
:
함께 보기
-
mask-position속성,
마스크의 위치를 정의합니다 -
mask-repeat속성,
마스크의 반복을 정의합니다 -
mask속성,
모든 마스킹 속성의 단축 속성입니다
