CSS 마스크 위치 속성

예시

마스크 레이어 이미지의 위치를 중앙으로 설정합니다.

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

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

이 mask-position속성은 마스크 이미지의 시작 위치를 설정합니다(마스크 위치 영역에 상대적).

팁: 기본적으로 마스크 이미지는 요소의 왼쪽 상단 모서리에 배치되고 수직 및 수평으로 반복됩니다.

기본값:	0% 0%
상속:	아니요
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
버전:	CSS3
자바스크립트 구문:	개체 .style.maskPosition="100px 중심"

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

-webkit- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Property
mask-position	4.0 -webkit-	79.0 -webkit-	53.0	4.0 -webkit-	15.0 -webkit-

CSS 구문

mask-position: value;

속성 값

Value	Description
left top left center left bottom right top right center right bottom center top center center center bottom	If you only specify one keyword, the other value will be "center"
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시

마스크 레이어 이미지의 위치를 오른쪽 하단 모서리로 설정합니다.

CSS 참조

CSS Properties