CSS mask-type 屬性

定義和用法

mask-type 屬性指定 SVG <mask> 元素是作為亮度遮罩還是作為 alpha 遮罩來處理。

此屬性適用于 SVG <mask> 元素本身。

實例

查看兩個 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 將遮罩圖像視為 alpha 遮罩。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： luminance
繼承性： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS Masking Module Level 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 屬性