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;
}

親自試一試

CSS 語法

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 Module Level 1
JavaScript 語法： object.style.maskMode="alpha"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

相關頁面

教程：CSS 遮罩

參考：CSS mask 屬性

參考：CSS mask-clip 屬性

參考：CSS mask-composite 屬性

參考：CSS mask-image 屬性

參考：CSS mask-origin 屬性

參考：CSS mask-position 屬性

參考：CSS mask-repeat 屬性

參考：CSS mask-size 屬性

參考：CSS mask-type 屬性