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-mode: luminance;
}
정의 및 사용
이 mask-mode
속성은 마스크 레이어 이미지를 광도 마스크로 처리할지 알파 마스크로 처리할지 지정합니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
mask-mode | Not supported | Not supported | 53.0 | Not supported | Not supported |
CSS 구문
mask-mode:
match-source|luminance|alpha|initial|inherit;
속성 값
Value | Description |
---|---|
match-source | If the mask-image property is an image (an image URL or a gradient), set mask-mode to alpha. If the mask-image property is an SVG <mask> element, use the <mask> element's mask-type property. This is default. |
luminance | Use the luminance values of the mask image as the mask values |
alpha | Use the alpha values of the mask image as the mask values |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
관련 페이지
CSS 참조: 마스크 이미지 속성
CSS 참조: mask-origin 속성
CSS 참조: 마스크 위치 속성
CSS 참조: mask-repeat 속성
CSS 참조: 마스크 크기 속성
CSS 튜토리얼: CSS 마스킹