CSS - mask-mode

概要

属性名mask-mode
値<masking-mode>#
値の詳細<masking-mode> = alpha | luminance | match-source
初期値match-source
適用可能要素すべての要素。SVG においては <defs> 要素を除くコンテナ要素、グラフィック要素、および、<use> 要素
継承継承しない
サポートhttps://caniuse.com/mdn-css_properties_mask-mode

説明

マスクイメージのマスクモードを指定します。詳細は CSSマスク を参照してください。

alpha
マスク画像のアルファ値で透過します。
luminance
マスク画像の輝度で透過します。
match-source
マスク画像が <mask-source> 型であればマスク画像の mask-type 値(デフォルトは luminance) に従います。マスク画像が <image> 型であればマスク画像のアルファ値でマスクします。

mask-image で複数の画像を指定している場合は、mask-mode にもカンマ(,)区切りで複数の値を指定することができます。

使用例

CSS
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

リンク

Copyright (C) 2024 杜甫々
初版：2024年12月29日、最終更新：2024年12月29日
https://www.tohoho-web.com/css/prop/mask-mode.htm