これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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
適用対象all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
継承不可
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序per grammar

構文

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 の定義
勧告候補 初回定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし ?53 なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし ? ?53 なし なし なし

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,