CSS 蒙版
使用 CSS 蒙版，您可以建立一個蒙版層疊加在元素上來部分或全部隱藏該元素的一部分。
CSS mask-image 屬性
CSS mask-image 屬性指定蒙版層的影像。
蒙版層的影像可以是 PNG 影像、SVG 影像、CSS 漸變，或SVG <mask> 元素。
瀏覽器支援
下表中的數字表示該屬性完全支援的第一個瀏覽器版本。
後面帶有 -webkit- 的數字表示需要加字首才能使用的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| mask-image | 120 | 120 | 53 | 15.4 | 15 -webkit- |
使用影像作為蒙版層
要使用 PNG 或 SVG 影像作為蒙版層，請使用 url() 值來傳入蒙版層影像。
蒙版影像需要有透明或半透明的區域。黑色表示完全透明。
這是我們將要使用的蒙版影像（一個 PNG 影像）
這是義大利五漁村的一張圖片
現在，我們將蒙版影像（上面這張 PNG 影像）應用為義大利五漁村圖片的蒙版層。
示例
這是原始碼
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-repeat: no-repeat;
}
自己動手試一試 »
示例解釋
mask-image 屬性指定用作元素蒙版層的影像。
mask-repeat 屬性指定蒙版影像是否以及如何重複。no-repeat 值表示蒙版影像不會重複（蒙版影像只會顯示一次）。
另一個示例
如果省略 mask-repeat 屬性，蒙版影像將會在五漁村的圖片上重複顯示。
使用漸變作為蒙版層
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(img_5terre.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="img_5terre.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="img_5terre.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="img_5terre.jpg" mask="url(#svgmask3)"></image>
</svg>
自己動手試一試 »
CSS 蒙版屬性
下表列出了所有 CSS 蒙版屬性
| 屬性 | 描述 |
|---|---|
| mask-clip | 指定哪個區域受蒙版影像影響 |
| mask-composite | 指定一個複合操作，用於將當前蒙版層與它下面的蒙版層進行組合 |
| mask-image | 指定用作元素蒙版層的影像 |
| mask-mode | 指定蒙版層影像被視為亮度蒙版還是 Alpha 蒙版 |
| mask-origin | 指定蒙版層影像的起始位置（蒙版位置區域） |
| mask-position | 設定蒙版層影像的起始位置（相對於蒙版位置區域） |
| mask-repeat | 指定蒙版層影像的重複方式 |
| mask-size | 指定蒙版層影像的大小 |
