CSS mask-type 属性

定義と使用方法

mask-type 属性はSVG <mask> 要素が明るさマスクとしてそれを処理するか、アルファマスクとして処理するかを指定します。

この属性はSVG <mask> 要素自体に適用されます。

例

、2つのSVG <mask> 要素を確認してください；一方は mask-type: alpha、もう一方は mask-type: luminance：

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  </defs>
    <mask id="mask1" maskContentUnits="objectBoundingBox" style="mask-type:alpha">
      <rect width="10" height="10" fill="red" fill-opacity="0.7" />
    </mask>
    <mask id="mask2" maskContentUnits="objectBoundingBox" style="mask-type:luminance">
      <rect width="10" height="10" fill="red" fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

自分で試してみてください

CSS 文法

mask-type: luminance|alpha|initial|inherit;

属性値

値 説明
luminance マスク画像を明るさマスクとして視覚化します。デフォルト値。
alpha マスク画像をアルファマスクとして視覚化します。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit 親要素からこの属性を継承します。参照してください： inherit。

技術的詳細

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

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
24 79 35 7 15

相关页面

教程：CSS 遮罩

参考：CSS mask 属性

参考：CSS mask-clip 属性

参考：CSS mask-composite 属性

参考：CSS mask-image 属性

参考：CSS mask-mode 属性

参考：CSS mask-origin 属性

参考：CSS mask-position 属性

参考：CSS mask-repeat 属性

参考：CSS mask-size 属性