CSS 마스크 이미지 속성

예시

이미지에 대한 마스크 레이어 만들기:

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

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

정의 및 사용

mask-image속성은 요소의 마스크 레이어로 사용할 이미지를 지정합니다 .

팁: CSS의 선형 및 방사형 그래디언트도 마스크 이미지로 사용할 수 있습니다.

기본값:	없음
상속:	아니요
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
버전:	CSS3
자바스크립트 구문:	개체 .style.maskImage="url(star.svg)"

브라우저 지원

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

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

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

CSS 구문

mask-image: none|image|url|initial|inherit;

속성 값

Value	Description
none	This is default
image	An image to use as the mask layer
url	An url reference to an image or an SVG <mask> element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시

선형 및 방사형 그라디언트로 이미지에 대해 다른 마스크 레이어를 만듭니다.

.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}

.mask2 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

.mask3 {
-webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}

예시

SVG <mask> 요소를 사용하여 이미지에 대한 마스크 레이어를 만듭니다.

예시