mask-mode

CSSmask-mode プロパティは、 mask-image で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。

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

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

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

構文

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

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

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

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

公式定義

初期値match-source
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
計算値指定値
アニメーションの種類個別

形式文法

<masking-mode>#

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

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

CSS

#masked {
  width: 227px;
  height: 200px;
  background: blue linear-gradient(red, blue);
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
  mask-mode: alpha; /* ライブサンプルで変更することができます */
}

結果

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
mask-mode の定義
勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mask-modeChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 53IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 53Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応