CSS 마스크 모드 속성

정의와 사용법

mask-mode 속성은罩层 이미지가 밝기罩로 처리되는지 alpha罩으로 처리되는지 지정합니다。

罩层 이미지가 밝기罩로 처리됨:

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

mask-mode: match-source|luminance|alpha|initial|inherit;

값	설명
match-source	mask-image 속성이 이미지(이미지 URL 또는 그레이드)이면, mask-mode를 alpha로 설정합니다。 mask-image 속성이 SVG <mask>이면, <mask> 요소의 mask-type 속성을 사용합니다。 이는 기본 값입니다。
luminance	罩图의 밝기 값을罩值로 사용합니다。
alpha	罩图 alpha 값을罩值로 사용합니다。
initial	이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit	부모 요소에서 이 속성을 상속합니다. 참조: inherit。

표에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。

크롬	에지	파이어폭스	사파리	오페라
120	120	53	15.4	106