設計師或者會用sketch、photoshop一類設計工具的朋友應該都了解蒙版(mask)這個東西。接下來我先以photoshop為例，簡單解釋蒙版的工作原理。
上圖中我建立了兩個圖層——藍色的背景和紅色的前景，並且在紅色前景上應用了乙個蒙版（右邊紅圈）。正常情況下紅色前景應該完全遮蓋住藍色背景，但是請注意紅圈中的蒙版，我在這個蒙版上畫了乙個黑色的矩形。
蒙版中黑色代表不可見（opacity: 0），白色代表可見（opacity: 100%），將蒙版對應到紅色圖層後就很容易理解：黑色矩形在紅色圖層上對應的區域變成了不可見，所以下層的藍色會顯示出來。
還是以上面photoshop中的圖為例子，我們用svg來一步一步地建立乙個這樣的圖形。
先建立紅色前景和藍色背景
id，然後在需要應用蒙版的元素上新增一條屬性mask="url(#id)"。
之前在講蒙版原理的時候說到：
黑色代表不可見（opacity: 0），白色代表可見（opacity: 100%）。那麼黑白之間的灰色代表什麼呢？ 聰明的同學已經想到了，從0%到100%是乙個線性的變化，所以黑白中間的灰色會是半透明，而且不同灰度代表不同程度的半透明，越趨近白色可見度越高。在蒙版中的黑白漸變，應用到彩色圖層上就會產生透明度的漸變。
maskunits, maskcontentunits, x, y, width, height我現在完全搞不懂該怎麼用，希望有所了解的朋友不吝指教。 PS蒙版基礎知識介紹
蒙版就是控制調整的工具 蒙版，聽起來似乎是乙個很專業的詞彙，其實理解它十分簡單。例如我們把一張的飽和度降至最低時畫面會變成黑白。但是我們希望畫面中間依舊有色彩，只是畫面的邊緣變成黑白。這時候怎麼處理呢?我們只需要讓我們的調整應用到部分影象就行了。這時候我們就需要乙個工具來控制哪一部分影象應用調整，哪...
UI設計師SVG動畫高階篇 蒙版動畫（上）
蒙版對於ui設計師來說，太熟悉不過了，當然了，可能ps裡面用的多一些，ai裡面用的少一些，svg同樣支援蒙版，而且借助蒙版，能完成很多神奇的效果。我喜歡稱蒙版動畫為一種魔術，這是真正的 障眼法 它只讓你看到想要看到的部分。前面svg的動畫效果裡，有兩次用過了蒙版，乙個是在路徑動畫中 juejin.i...
ps蒙版的作用
蒙版是浮在圖層之上的一塊擋板，它本身不包含影象資料，只是對圖層的部分資料起遮擋作用，當對圖層進行操作處理時，被遮擋的資料將不會受影響。蒙板其實就是ps裡面的乙個層，最常見的是單色的層或有圖案的層，疊在原有的 層上面，就象是在一張 上面放一塊玻璃的道理一樣，單色的層就是單色玻璃，有圖案的層就是花紋玻璃...