-webkit-mask-composite

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

webkit-mask-composite プロパティは、同じ要素に適用された複数のマスク画像を互いに合成する方法を指定します。マスク画像は、-webkit-mask-image プロパティで宣言された順序とは逆に合成されます。

css
/* キーワード値 */
-webkit-mask-composite: clear;
-webkit-mask-composite: copy;
-webkit-mask-composite: source-over;
-webkit-mask-composite: source-in;
-webkit-mask-composite: source-out;
-webkit-mask-composite: source-atop;
-webkit-mask-composite: destination-over;
-webkit-mask-composite: destination-in;
-webkit-mask-composite: destination-out;
-webkit-mask-composite: destination-atop;
-webkit-mask-composite: xor;

/* グローバル値 */
-webkit-mask-composite: inherit;
-webkit-mask-composite: initial;
-webkit-mask-composite: unset;

メモ: この標準外のプロパティの一部を別のキーワードでカバーする、標準化された mask-composite プロパティがあります。

構文

値

clear

元のマスク画像と合成用マスク画像の重なり合ったピクセルがクリアされます。

copy

コピー元のマスク画像をコピー先のマスク画像に置き換えます。

source-over

元のマスク画像を合成用のマスク画像の上にレンダリングします。

source-in

元のマスク画像と合成用マスク画像の重なり合ったピクセルが、元のマスク画像のピクセルで置き換えられ、それ以外のピクセルはクリアされます。

source-out

元のマスク画像と合成用マスク画像の重なり合ったピクセルがクリアされ、元のマスク画像の残りのピクセルがすべてレンダリングされます。

source-atop

合成用マスク画像のピクセルがレンダリングされます。元のマスク画像のピクセルは、合成用マスク画像の非透過部分と重なっている場合にのみレンダリングされます。これにより、元のマスク画像の効果はありません。

destination-over

合成用マスク画像は、元のマスク画像の上にレンダリングされます。

destination-in

元のマスク画像と合成用マスク画像で重複するピクセルは、合成用マスク画像のピクセルのままとなり、それ以外のピクセルはクリアされます。

destination-out

元のマスク画像と合成用マスク画像の重なり合ったピクセルはクリアされ、元のマスク画像の残りのピクセルはすべてレンダリングされます。

destination-atop

元のマスク画像のピクセルがレンダリングされます。合成用マスク画像のピクセルは、合成用マスク画像の非透過部分と重なっている場合にのみレンダリングされます。これにより、合成用マスク画像は何の影響も受けません。

xor

元のマスク画像と合成用マスク画像の重なっているピクセルは、両者が完全に不透明であれば完全に透明になります。

公式定義

初期値source-over
適用対象すべての要素
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

Error: could not find syntax for this item

例

XOR で合成する

css
.example {
  -webkit-mask-image: url(mask1.png), url("mask2.png");
  -webkit-mask-composite: xor, source-over;
}

仕様書

標準には含まれていません。このプロパティは mask-composite として異なる値で定義されています。

ブラウザーの互換性

BCD tables only load in the browser

関連情報