style mask-*

CSS	FireFox	chrome, safari 등	비고
mask-image	O	X
-webkit-mask-image	O	O
mask-size	O	X
-webkit-mask-size	O	O
mask-repeat	O	X
-webkit-mask-repeat	O	O
mask-mask-position	O	X
mask-mode	O	X
mask-composite	O	X
-webkit-mask-composite	O?	O	FireFox 도 -webkit-mask-image 를 지원하지만,mask-composite 의 별칭으로 지원한다. (즉, 설정 값은 add,subtract 등만 가능)

mask-composite(FireFox)	-webkit-mask-image (chrome, safari ...)	비고
add	source-over	합집합. 기본값
subtract	source-out	차집합
intersect	source-in	교집합
exclude	xor	배타적 논리합

기본모양

배경모양

마스크모양

mask-image , -webkit-mask-image

mask-image

FF:O , CHROME:X

-webkit-mask-image

FF:O , CHROME:O

mask-type : css mask-* 와 상관 없다. svg 의 <mask> 제어용

mask-type:luminance

FF:O , CHROME:X

mask-type:alpha

FF:O , CHROME:O

mask-mode

FF only

mask-mode:luminance

FF:O , CHROME:X

mask-mode:alpha

FF:O , CHROME:X

mask-mode:match-source

FF:O , CHROME:X

mask-composite , -webkit-mask-composite

(이 둘은 동작에 아주 많은 차이가 있다.)

mask-composite

FF:O , CHROME:X

-webkit-mask-composite

FF:O , CHROME:X

기본모양

배경모양

마스크모양

add = source-over (default value)

add : The source is placed over the destination.
source-over : The source mask image is rendered over the destination mask image.

mask-composite:add

-webkit-mask-composite:source-over

subtract = source-out

subtract : The source is placed, where it falls outside of the destination.
source-out : Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered.

mask-composite:subtract

-webkit-mask-composite:source-out

intersect = source-in

intersect : The parts of source that overlap the destination, replace the destination.
source-in : Overlapping pixels in the source mask image and the destination mask image are replaced by the pixels of the source mask image; all other pixels are cleared.

mask-composite:intersect

-webkit-mask-composite:source-in

exclude = xor

exclude : The non-overlapping regions of source and destination are combined.
xor : Overlapping pixels in the source mask image and the destination mask image become fully transparent if they are both fully opaque.

mask-composite:exclude

-webkit-mask-composite:xor

3개의 mask-image 기본모양

배경모양

마스크모양

3개의 mask-image. add,subtract

mask-composite:add,subtract

-webkit-mask-composite:source-over,source-out

mask-composite:add,subtract; -webkit-mask-composite:source-over,source-out

3개의 mask-image. add,intersect

mask-composite:add,intersect

-webkit-mask-composite:source-over,source-in

mask-composite:add,intersect; -webkit-mask-composite:source-over,source-in

4개의 mask-image 기본모양

배경모양

마스크모양

4개의 mask-image. add,subtract,intersect = source-over,source-out,source-in

동작 설명

intersect : 마스크이미지 3번(노란색 사각형, 소스)과 4번(파란색 원, 타겟)의 공통 부분 추출
subtract : 마스크이미지 2번(연두 사각형, 소스)을 위의 결과(타겟)로 뺀다.
add : 마스크이미지 1번(붉은 원, 소스)을 위의 결과(타겟)로 합친다.

mask-composite:add,subtract,intersect

-webkit-mask-composite:source-over,source-out,source-in

mask-composite:add,subtract,intersect; -webkit-mask-composite:source-over,source-out,source-in

배경모양

마스크모양

mask-composite:intersect,subtract,intersect

-webkit-mask-composite:source-in,source-out,source-in

mask-composite:intersect,subtract,intersect; -webkit-mask-composite:source-in,source-out,source-in

mask-* , -webkit-mask-*

브라우저 호환표

mask-composite vs -webkit-mask-image

예제

기본모양

mask-image , -webkit-mask-image

mask-type : css mask-* 와 상관 없다. svg 의 <mask> 제어용

mask-mode

FF only

mask-composite , -webkit-mask-composite

(이 둘은 동작에 아주 많은 차이가 있다.)

mask-composite , -webkit-mask-composite

composite 동작 설명

기본모양

add = source-over (default value)

subtract = source-out

intersect = source-in

exclude = xor

호환성을 생각한 mask-composite , -webkit-mask-composite

3개의 mask-image 기본모양

3개의 mask-image. add,subtract

3개의 mask-image. add,intersect

4개의 mask-image 기본모양

4개의 mask-image. add,subtract,intersect = source-over,source-out,source-in

동작 설명

destination-out 구현을 위한 방법

4개의 mask-image 기본모양 (2)

destination-out 구현