プロパティ mask-composite
プロパティ mask-composite は、1つの要素に適用される複数のマスクを組み合わせることを可能にします。これは、異なるマスクが重ね合わされたときに互いにどのように作用するかを定義します。
構文
セレクタ {
mask-composite: <compositing-operator>#;
}
値
| 値 | 説明 |
|---|---|
add |
結果はすべてのマスクの結合です(デフォルト)。 |
subtract |
2番目のマスクが最初のマスクから減算されます。 |
intersect |
マスクの交差領域のみが表示されます。 |
exclude |
マスクに共通しない領域が表示されます。 |
例 . add モード
2つのマスク(ハートと矢印)の結合:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image:
url("heart.svg"),
url("arrow.svg");
mask-position:
100px 50px,
200px 30px;
mask-size: 150px;
mask-repeat: no-repeat;
mask-composite: add;
}
:
例 . subtract モード
ハートからの矢印の減算:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image:
url("heart.svg"),
url("arrow.svg");
mask-position:
100px 50px,
170px 80px;
mask-size:
250px,
120px;
mask-repeat: no-repeat;
mask-composite: subtract;
}
:
例 . intersect モード
マスクの交差領域のみの表示:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image:
url("heart.svg"),
url("arrow.svg");
mask-position:
100px 50px,
50px 30px;
mask-size: 150px;
mask-repeat: no-repeat;
mask-composite: intersect;
}
:
例 . exclude モード
共通ではない領域の表示:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image:
url("heart.svg"),
url("arrow.svg");
mask-position:
100px 50px,
50px 30px;
mask-size: 150px;
mask-repeat: no-repeat;
mask-composite: exclude;
}
:
例 . グラデーションとの組み合わせ
グラデーションマスクとの使用:
<div id="gradient-box"></div>
#gradient-box {
width: 400px;
height: 400px;
background: linear-gradient(45deg, red, yellow, green, blue);
mask-image:
radial-gradient(circle at 30% 30%, black 40%, transparent 70%),
radial-gradient(circle at 70% 70%, black 40%, transparent 70%);
mask-composite: exclude;
}
:
関連項目
-
プロパティ
mask-image,
マスクの画像を指定します -
プロパティ
mask,
マスキングに関するすべてのプロパティの一括指定 -
プロパティ
mask-mode,
マスクの合成モードを定義します -
プロパティ
mix-blend-mode,
要素の合成モードを定義します