mask-composite

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

構文

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

値

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

add

source が destination の上に配置されます。

subtract

destination の外側に source が配置されます。

intersect

destination と重なっている source の部分が destination を置き換えます。

exclude

source と destination で重なっていない領域が結合されます。

公式定義

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

形式文法

mask-composite = 
  <compositing-operator>#  

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

例

マスクレイヤーを加算で合成

仕様書

Specification
CSS Masking Module Level 1
# the-mask-composite

ブラウザーの互換性

BCD tables only load in the browser

関連情報