CSS 마스크 타입 속성

정의와 사용법

mask-type 속성은 SVG <mask> 요소가 밝기 마스크로还是有 alpha 마스크로 처리되는지 지정합니다。

이 속성은 SVG <mask> 요소 자체에 적용됩니다。

예제

두 개의 SVG <mask> 요소를 확인하세요; 하나는 mask-type: alpha，다른 하나는 mask-type: luminance：

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  </defs>
    <mask id="mask1" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect width="10" height="10" fill="red" fill-opacity="0.7" />
    </mask>
    <mask id="mask2" maskContentUnits="objectBoundingBox" style="mask-type:luminance">
      <rect width="10" height="10" fill="red" fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

본인이 직접 시도해 보세요

CSS 문법

mask-type: luminance|alpha|initial|thừa kế;

속성 값

값 설명
luminance 遮罩 이미지를 밝기 마스크로 본다. 기본 값.
alpha 遮罩 이미지를 alpha 마스크로 본다.
initial 이 속성을 기본 값으로 설정합니다. 참조 initial。
thừa kế 부모 요소에서 이 속성을 thừa kế합니다. 참조 thừa kế。

기술 세부 사항

기본 값: luminance
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성。
버전: CSS Masking Module Level 1
JavaScript 문법: object.style.maskType="alpha"

브라우저 지원

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

크롬 에지 파이어폭스 사파리 오페라
24 79 35 7 15

관련 페이지

강의:CSS 쉼터

참조:CSS 마스크 속성

참조:CSS 마스크 클립 속성

참조:CSS 마스크 컴포지트 속성

참조:CSS 마스크 이미지 속성

참조:CSS 마스크 모드 속성

참조:CSS 마스크 오리진 속성

참조:CSS 마스크 포지션 속성

참조:CSS 마스크 리페트 속성

참조:CSS 마스크 사이즈 속성