CSS 마스크 원본 속성

예시

mask-origin: border-box;및 사용 mask-origin: content-box;:

.mask1 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: border-box;
mask-origin: border-box;
}

.mask2 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: content-box;
mask-origin: content-box;
}

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

정의 및 사용

속성 은 mask-origin마스크 레이어 이미지의 원점 위치(마스크 위치 영역)를 지정합니다.

기본값:	테두리 상자
상속:	아니요
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
버전:	CSS3
자바스크립트 구문:	object .style.maskOrigin="패딩 상자"

브라우저 지원

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

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

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

CSS 구문

속성 값

Value	Description
border-box	The position is relative to the border box. This is default
content-box	The position is relative to the content box
padding-box	The position is relative to the padding box
margin-box	The position is relative to the margin box
fill-box	The position is relative to the object bounding box
stroke-box	The position is relative to the stroke bounding box
view-box	Use the nearest SVG viewport as reference box
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시