mask

Baseline 2023

新推出

自 ⁨2023 年 12 月⁩起，此功能可在最新的裝置和瀏覽器版本上使用。此功能可能無法在較舊的裝置或瀏覽器上使用。

mask 屬性是一個表示屬性，主要用於將指定的 <mask> 元素與屬性所屬的元素繫結。

注意： 作為表示屬性，mask 也有一個對應的 CSS 屬性：mask。當同時指定兩者時，CSS 屬性具有優先權。

你可以將此屬性與以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <mask id="myMask" maskContentUnits="objectBoundingBox">
    <rect fill="white" x="0" y="0" width="100%" height="100%" />
    <polygon
      fill="black"
      points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" />
  </mask>

  <!--
  Punch a hole in a shape of a star inside the red circle,
  revealing the yellow circle underneath
  -->
  <circle cx="50" cy="50" r="20" fill="yellow" />
  <circle cx="50" cy="50" r="45" fill="red" mask="url(#myMask)" />
</svg>

自 SVG2 起，mask 屬性被定義為 CSS 屬性，並且是許多其他屬性的簡寫：mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-size 和 mask-composite。

用法說明

值	請參閱 CSS 屬性 `mask`
預設值	`none`
可動畫的	是

規範

規範
CSS 蒙版模組 Level 1 # the-mask

瀏覽器相容性

另見

CSS mask 屬性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年4月16日⁩，作者為 MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的此問題