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-modeCSS のプロパティで、 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
mask-mode
alpha
luminance
match-source

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報