mask-composite

mask-compositeCSS のプロパティで、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる合成操作を表します。

/* キーワード値 */
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

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

構文

以下に示す1つまたは複数のキーワード値を、カンマで区切って指定します。

混合において、現在のマスクレイヤーは source、その下にあるすべてのマスクレイヤーは destination とします。

add
source が destination の上に配置されます。
subtract
destination の外側に source が配置されます。
intersect
destination と重なっている source の部分が destination を置き換えます。
exclude
source と destination で重なっていない領域が結合されます。

公式定義

初期値add
適用対象すべての要素。 SVG の場合は defs 要素やすべてのグラフィック要素を除いたコンテナー要素に適用される
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

<compositing-operator>#

ここで
<compositing-operator> = add | subtract | intersect | exclude

追加でマスクレイヤーの合成

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
              url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-size: 100% 100%;
  mask-composite: add; /* Can be changed in the live sample */
}

結果

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
mask-composite の定義
勧告候補 初回定義

ブラウザーの互換性

BCD tables only load in the browser