これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSSmask-composite プロパティは、現在のマスクレイヤーとその下のマスクレイヤーとの間で使われる混色操作を表します。

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

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

初期値add
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

構文

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

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

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

形式文法

<compositing-operator>#

where
<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 の定義
勧告候補 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし1 ?53 なし なし1 なし1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? ?53 ? ? なし

1. See also -webkit-mask-composite for a similar non-standard property that uses different keywords.

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,