CSS 遮罩

使用 CSS 遮罩，您可以創建一個遮罩層并將其放置在元素上，以部分或完全隱藏元素的某些部分。

mask-image 屬性

CSS mask-image 屬性指定遮罩層圖像。

遮罩層圖像可以是 PNG 圖像、SVG 圖像、CSS 漸變 或 SVG <mask> 元素。

瀏覽器支持

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

帶有 -webkit- 前綴的數字表示支持該前綴的第一個版本。

使用圖像作為遮罩層

要將 PNG 或 SVG 圖像用作遮罩層，請使用 url() 值傳遞遮罩層圖像。

遮罩圖像需要具有透明或半透明區域。黑色表示完全透明。

這是我們將使用的遮罩圖像（PNG 圖像）：

這是來自意大利五漁村的圖像：

現在，我們將遮罩圖像（上面的 PNG 圖像）應用為意大利五漁村圖像的遮罩層：

實例

以下是源代碼：

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

親自試一試

例子解釋

mask-image 屬性指定用作元素遮罩層的圖像。

mask-repeat 屬性指定遮罩圖像是否重復或如何重復。no-repeat 值表示遮罩圖像不會重復（遮罩圖像只會顯示一次）。

另一個實例

如果我們省略 mask-repeat 屬性，遮罩圖像將重復顯示在整個五漁村圖像上：

實例

以下是源代碼：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

親自試一試

使用漸變作為遮罩層

CSS 線性和徑向漸變也可以用作遮罩圖像。

線性漸變實例

在這里，我們使用線性漸變作為圖像的遮罩層。此線性漸變從頂部（黑色）到底部（透明）：

實例

使用線性漸變作為遮罩層：

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

親自試一試

在這里，我們使用線性漸變和文本遮罩作為圖像的遮罩層：

實例

使用線性漸變和文本遮罩作為遮罩層：

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

親自試一試

徑向漸變實例

在這里，我們使用徑向漸變（形狀為圓形）作為圖像的遮罩層：

實例

使用徑向漸變作為遮罩層（圓形）：

.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

親自試一試

在這里，我們使用徑向漸變（形狀為橢圓）作為圖像的遮罩層：

實例

使用另一個徑向漸變作為遮罩層（橢圓）：

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

親自試一試

使用 SVG 作為遮罩層

SVG <mask> 元素可以在 SVG 圖形內部使用，以創建遮罩效果。

在這里，我們使用 SVG <mask> 元素為圖像創建不同的遮罩層：

實例

一個 SVG 遮罩層（形狀為三角形）：

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

親自試一試

實例

一個 SVG 遮罩層（形狀為星形）：

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

親自試一試

實例

一個 SVG 遮罩層（形狀為圓形）：

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

親自試一試