形を2枚重ねる
不透明な部分が表示領域、透明な部分が非表示領域です。このデモでは不透明な黒を使った2つの円形グラデーションを重ねます。
CSS MASKING · COMPOSITE
CSS Mask Composite Lab
2枚のマスクを重ねて、見える部分を組み立てる。
014 OPERATIONS
LIVE MASK COMPOSITE
同じ2枚で、残る形を比べる
mask.local / live previewSUBTRACT
RESULT / 2 MASKS
AからBを引く
A 上−B 下=RESULT
Aのうち、Bと重ならない部分が表示されます。
COMPARE ALL FOUR
同じAとBで見比べる
02
HOW MASKS COMBINE
色の合成ではなく、表示領域の合成
重なりの扱いを決める
addは両方、subtractはAからBを引く、intersectは重なりだけ、excludeは重なり以外を残します。
subtractは順序が重要
1枚目のAが上です。BからAを引きたいときは、mask-imageの記述順を入れ替えます。
参考：mask-image · mask-composite