プロパティ 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-composite

構文

値

例 . add モード

例 . subtract モード

例 . intersect モード

例 . exclude モード

例 . グラデーションとの組み合わせ

関連項目