CSS 마스크 컴포지트 속성

정의와 사용법

mask-composite 속성은 현재 마스킹 레이어와 아래 마스킹 레이어에서 사용하는 합성 연산을 지정합니다。

예제

보여주기 mask-composite 속성의 다른 값:

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background: blue;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
  mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
}
.mask1 {
  mask-composite: add;
}
.mask2 {
  mask-composite: subtract;
}
.mask3 {
  mask-composite: intersect;
}
.mask4 {
  mask-composite: exclude;
}

본인이 직접 시도해 보세요

CSS 문법

mask-composite: add|subtract|intersect|exclude|initial|inherit;

속성 값

값 설명
추가 원본 마스킹 레이어가 목표 마스킹 레이어 위에 배치됩니다。
subtract 원본 마스킹 레이어가 목표 마스킹 레이어 밖에 있는 부분을 배치합니다。
intersect 원본 마스킹 레이어와 목표 마스킹 레이어가 겹치는 부분을 목표 마스킹 레이어로 대체합니다。
제외 원본 마스킹 레이어와 목표 마스킹 레이어가 겹치지 않는 부분을 합칩니다。
기본 이 속성을 기본 값으로 설정합니다. 참조: 기본。
상속 부모 요소에서 이 속성을 상속합니다. 참조: 상속。

기술 세부 사항

기본 값: 추가
상속성: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성。
버전: CSS 마스킹 모듈 레벨 1
JavaScript 문법: object.style.maskComposite="intersect"

브라우저 지원

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

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

관련 페이지

강의:CSS 셀라

참조:CSS 마스크 속성

참조:CSS 마스크 클립 속성

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

참조:CSS 마스크 모드 속성

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

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

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

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

참조:CSS 마스크 타입 속성