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;
初期値match-source
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序構文通り

構文

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

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

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

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

形式文法

<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-mode
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 53IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 53Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。