mask-mode

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-mode は CSS のプロパティで、 mask-image で定義されたマスクを、輝度とアルファマスクのどちらで扱うかを設定します。

css
/* キーワード値 */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/* 複数の値 */
mask-mode: alpha, match-source;

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

構文

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

値

alpha

このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。

luminance

このキーワードは、マスクレイヤーの輝度の値をマスクの値として使用することを示します。

match-source

mask-image プロパティが <mask-source> 型であれば、マスクレイヤー画像の輝度の値がマスクの値として使用されます。

<image> 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。

公式定義

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

形式文法

mask-mode = 
  <masking-mode>#  

<masking-mode> = 
  alpha         |
  luminance     |
  match-source

例

アルファマスクモードの使用

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報