CSS mask-mode 属性

定義と用法

mask-mode 属性は、マスクレイヤー画像が明るさマスクとして見なされるか alpha マスクとして見なされるかを指定します。

マスクレイヤー画像が明るさマスクとして見なされます：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
  mask-mode: luminance;
}

mask-mode: match-source|luminance|alpha|initial|inherit;

値	説明
match-source	mask-image 属性が画像（画像 URL またはグラデーション）である場合、mask-mode を alpha に設定します。 mask-image 属性が SVG <mask> である場合、<mask> 要素の mask-type 属性を使用します。これはデフォルト値です。
luminance	マスク画像の明るさ値を使用してマスク値を設定します。
alpha	マスク画像の alpha 値を使用してマスク値を設定します。
initial	この属性をデフォルト値に設定します。参照 initial。
inherit	親要素からこの属性を継承します。参照 inherit。

デフォルト値：	match-source
継承性：	いいえ
アニメーション制作：	サポートしていません。参照してください：アニメーション関連属性。
バージョン：	CSS Masking モジュールレベル 1
JavaScript 文法：	object.style.maskMode="alpha"

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome	Edge	Firefox	Safari	Opera
120	120	53	15.4	106