속성 mask-position
속성 mask-position은 요소에 대한 마스크의 초기 위치를 설정합니다.
background-position과 유사하게 작동하지만, 마스크에 적용됩니다.
구문
선택자 {
mask-position: <position>;
}
값
| 값 | 설명 |
|---|---|
top left |
왼쪽 상단 모서리 (기본값). |
center |
요소의 중앙. |
50% 50% |
center와 동일. |
right bottom |
오른쪽 하단 모서리. |
100px 200px |
픽셀 단위의 구체적 좌표. |
예제 . 마스크 중앙 정렬
이미지 중앙에 하트 모양 마스크:
<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;
}
:
예제 . 왼쪽 상단 모서리
왼쪽 상단 모서리의 마스크:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: left top;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
예제 . 오른쪽 하단 모서리
오른쪽 하단 모서리의 마스크:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: right bottom;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
예제 . 정확한 좌표
정확한 좌표로 마스크 위치 지정:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 100px 200px;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
예제 . 백분율 위치 지정
백분율을 이용한 마스크 위치 지정:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: 30% 70%;
mask-size: 150px;
mask-repeat: no-repeat;
}
:
함께 보기
-
속성
mask-size,
마스크 크기 정의 -
속성
mask-origin,
위치 지정 기준점 정의 -
속성
mask,
모든 마스킹 속성의 단축 속성
