CSS 마스크 포지션 속성
정의와 사용법
mask-position 속성은罩层图像的起始位置（相对于罩层位置区域）进行设置。
힌트:기본적으로,罩层图像放置在元素的左上角，并在垂直和水平方向上重复。
실例
예제 1
罩层图像的位置设置为居中：
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-size: 50%;
mask-repeat: no-repeat;
mask-position: center;
}
예제 2
罩层图像的位置设置为右下角：
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-size: 50%;
mask-repeat: no-repeat;
mask-position: 100% 100%;
}
CSS 문법
mask-position: value;
속성 값
| 값 | 설명 |
|---|---|
|
단 하나의 키워드만 지정하면 다른 값은 "center"가 됩니다. |
| x% y% |
첫 번째 값은 수평 위치이고 두 번째 값은 수직 위치입니다. 왼쪽 상단은 0% 0%입니다. 오른쪽 하단은 100% 100%입니다. 값을 하나만 지정하면 다른 값은 50%가 됩니다. 기본 값은 0% 0%입니다. |
| xpos ypos |
첫 번째 값은 수평 위치이고 두 번째 값은 수직 위치입니다. 왼쪽 상단은 0 0입니다. 단위는 픽셀(0px 0px)이나 다른 CSS 단위일 수 있습니다. 값을 하나만 지정하면 다른 값은 50%가 됩니다. %와 위치를 혼합 사용할 수 있습니다. |
| initial | 이 속성을 기본 값으로 설정합니다. 참조: initial。 |
| inherit | 이 속성을 부모 요소에서 상속합니다. 참조: inherit。 |
기술 세부 사항
| 기본값: | 0% 0% |
|---|---|
| 상속성: | 아니요 |
| 애니메이션 제작: | 지원하지 않습니다. 참조:애니메이션 관련 속성。 |
| 버전: | CSS 마스킹 모듈 레벨 1 |
| JavaScript 문법: | object.style.maskPosition="100px center" |
브라우저 지원
표格에 나타난 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 120 | 120 | 53 | 15.4 | 106 |
관련 페이지
교본:CSS 마스크
참조:CSS 마스크 속성
