CSS3

：

プロパティ

：

mask-mode

　 編集：2022.07.14 by T.A.

[Edge]⛌。→●、mdn

マスクのモード。

名前 mask-mode
値 <masking-mode>#
初期値 match-source
適用対象 mask-image と同じ（すべての要素。SVG においては、［defs 要素以外のコンテナ要素／グラフィックス要素／use 要素］）。
継承 されない
百分率 受容しない
算出値 指定値
正準的順序 文法に従う
アニメーション型 離散的

mask-mode プロパティは、<mask-reference> を［輝度マスク、アルファ マスク］のどちらに扱うかを指示する（マスクの処理法を見よ）。

<masking-mode>
＝alpha | luminance | match-source
alpha
マスク層画像のアルファ値がマスク値として利用されるべきであることを指示する。マスク値の計算法を見よ。
luminance
マスク層画像の輝度値がマスク値として利用されるべきであることを指示する。マスク値の計算法を見よ。
match-source
mask-image プロパティの <mask-reference> に応じて：

次の例では、mask-type プロパティは、mask 要素用のマスク型値を alpha に設定する。mask-image プロパティは、この mask 要素を参照していて、mask-mode プロパティの値は luminance にされている。mask-mode プロパティは、mask-type を luminance にしている定義を上書きすることになる。

mask-mode プロパティは、mask-border-source のマスク法モードには影響しないものとする。 

<mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
  <radialGradient id="radialFill">
    <stop stop-color="white" offset="0"/>
    <stop stop-color="black" offset="1"/>
  </radialGradient>
  <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
</mask>

<style>
  rect {
    mask-image: url(#SVGMask);
    mask-mode: luminance;
  }
</style>

<rect width="200" height="200" fill="green"/>

mask-mode 値を成すカンマで分離された値たちが、どのマスク層に寄与するかについては、複数のマスク画像の多層化法を見よ。

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：