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

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 未対応 なし
補足
未対応 なし
補足
補足 See also -webkit-mask-composite for a similar non-standard property that uses different keywords.
Edge 完全対応 18Firefox 完全対応 53IE 未対応 なしOpera 未対応 なし
補足
未対応 なし
補足
補足 See also -webkit-mask-composite for a similar non-standard property that uses different keywords.
Safari 未対応 なし
補足
未対応 なし
補足
補足 See also -webkit-mask-composite for a similar non-standard property that uses different keywords.
WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 53Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

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

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