エフェクト
mask-composite
mask-composite は、重ねた複数のマスクの層をどう組み合わせるかを指定します。足す・引く・重なった所だけ残す・重なった所を除くの 4 通りで、2 つの図形から新しい形を作れます。
構文
<compositing-operator>#
<compositing-operator> = add | subtract | intersect | excludeプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
mask-image:
radial-gradient(circle at 38% 50%, #000000 0 34%, #00000000 34.5%),
radial-gradient(circle at 62% 50%, #000000 0 34%, #00000000 34.5%);
mask-composite: subtract;
}コントロール
mask-compositesubtract
解説
4 つの値
add：初期値です。どちらかの層がある所が見えます。subtract：上の層から、下の層と重なった所を取り除きます。intersect：上の層と下の層が重なった所だけを残します。exclude：重なった所だけを取り除きます。
どれが上の層か
mask-image にカンマで並べた画像は、1 つ目がいちばん上の層です。mask-composite は、それぞれの層を、その下の層をまとめたものとどう組み合わせるかを決めます。そのため、いちばん下の層に当たる値は使われません。このページのプレビューでは左の円が上、右の円が下の層なので、subtract では左の円から右の円を取り除いた三日月の形が残ります。
気をつけること
- カンマで区切ると、層ごとに値を変えられます。値の数が層より少なければ、くり返して使われます。
- 古い
-webkit-mask-compositeは値の名前が違い、addはsource-over、subtractはsource-out、intersectはsource-in、excludeはxorに当たります。 - このページのプレビューでは、左右にずらした 2 つの円のグラデーションを
mask-imageに重ねています。