一、CSS mask遮罩的過往和現狀
CSS mask遮罩屬性的歷史非常久遠了，遠到比CSS3 border-radius等屬性還要久遠，最早是出現在Safari瀏覽器上的，差不多可以追溯到09年。
不過那個時候，遮罩只能作為實驗性的屬性，做一些特效使用。畢竟那個年代還是IE瀏覽器的時代，屬性雖好，但價值有限。
但是如今情況卻大有變化，除了IE和Edge瀏覽器不支持，Firefox，Chrome以及移動端等都已經全線支持，其實際應用價值已不可同日而語。尤其Firefox瀏覽器，從版本55開始，已經全面支持了CSS3 mask屬性。並且mask屬性規范已經進入候選推薦規范之列，會說以后進入既定規范標准已經是板上釘釘的事情，大家可以放心學習，將來必有用處。
二、CSS mask屬性
在過去，CSS mask屬性在使用的時候就是mask: xxx，但是現在隨着這個屬性的規范化，mask屬性實際上已經成為了諸多mask-*的縮寫，這和background, border性質是一樣的。
具體是哪些屬性的縮寫呢，可以參見下面的列表：
mask-image
mask-mode
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
mask-type
mask-composite
三、CSS mask-image屬性詳細介紹
mask-image指遮罩使用的圖片資源，默認值是none，也就是無遮罩圖片。因此，和border屬性中的border-style屬性類似，是一個想要有效果就必須設定的屬性值。
mask-image遮罩所支持的圖片類型非常的廣泛，可以是url()靜態圖片資源，格式包括JPG，PNG以及SVG等都是支持的；也可以是動態生成的圖片，例如使用各種CSS3漸變繪制的圖片。語法上支持CSS3各類漸變，以及url()功能符，image()功能符，甚至element()功能符。同時還支持多背景，因此理論上，使用mask-image我們可以遮罩出任意我們想要的圖形，非常強大。
眼見為實，我們通過大量案例來展示mask-image的強大之處。
下面所有案例使用原始圖如下
最基礎的png圖片遮罩展示
我們使用的遮罩圖片是一個名為Xia.png的圖片，如下：
HTML如下
<img src="img.jpg" class="Xia"></img>
CSS如下
.Xia{ width:300px; height:300px; -webkit-mask-image: url(Xia.png); mask-image: url(Xia.png); }
從上面這個最基本的案例，我們可以看出，所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分。因此，我們很少使用jpg圖片來作為遮罩圖片的，因為jpg圖片一定是完全不透明的，最終的效果就是原圖什么也看不到。
另外，如果Xia.png加載失敗，則Firefox，Chrome瀏覽器下直接原始圖不顯示。
CSS mask-mode屬性詳細介紹
mask-mode屬性的默認值是match-source，意思是根據資源的類型自動采用合適的遮罩模式。
例如，如果我們的遮罩使用的是SVG中的<defs>中的<mask>元素，則此時的mask-mode屬性的計算值是luminance，表示基於亮度遮罩。如果是其他場景，則計算值是alpha，表示基於透明度遮罩。
因此，mask-mode支持下面3個屬性值：
mask-mode: alpha;此關鍵字指示應使用掩碼層圖像的透明度（阿爾法通道）值作為掩碼值。
mask-mode: luminance;此關鍵字指示掩膜層圖像的亮度值應用作掩碼值。
mask-mode: match-source;（默認值）根據資源的類型自動采用合適的遮罩模式。
因為mask-image支持多圖片，因此mask-mode也支持多屬性值，例如：
mask-mode: alpha, match-source;
例如，我們把Xia.png遮罩改成基於亮度luminance，如下CSS：
.Xia{ width:300px; height:300px; -webkit-mask-mode: luminance; mask-mode: luminance; -webkit-mask-image: url(Xia.png); mask-image: url(Xia.png); }
結果Firefox瀏覽器下：
目前，mask-mode僅Firefox瀏覽器支持，因此，Chrome瀏覽器是看到的依然是基於alpha遮罩的效果，顏色不像上圖那樣淡。
五、mask-repeat屬性詳細介紹
mask-repeat屬性的默認值是repeat，行為類似於background-repeat屬性。
支持以下一些單屬性值：
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: no-repeat;
mask-repeat: space;
mask-repeat: round;
同時，根據自己的測試，Chrome和Firefox瀏覽器都支持x軸y軸2兩軸同時表示，例如：
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;
由於mask-image支持多遮罩圖片，因此，mask-repeat也支持多屬性值，例如：
mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;
每個屬性值的含義如下：
repeat-x
水平x平鋪，效果類似：
repeat-y
垂直y平鋪。
repeat
默認值，水平和垂直平鋪。
no-repeat
不平鋪，會看到就一個遮罩圖形孤零零的掛在左上角。
space
space同background等屬性中的space，表示遮罩圖片盡可能的平鋪同時不發生任何剪裁。
然而根據我的測試，在Chrome瀏覽器下，一側邊緣還是發生了剪裁，不過不明顯。Firefox瀏覽器則完美表現。
round
round表示遮罩圖片盡可能靠在一起沒有任何間隙，同時不發生任何剪裁。這就意味着圖片可能會有比例的縮放。
例如我們選擇mask-repeat為round，則遮罩效果就變成這樣：
六、mask-position屬性詳細介紹
mask-position和background-position支持的屬性值和表現基本上都是一模一樣的。
例如，mask-position默認計算值是0% 0%，也就是相對左上角定位。
支持單個關鍵字（缺省關鍵字的解析為center）：
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;
支持垂直和水平方向兩個關鍵字：
mask-position: right top;
支持各類數值：
mask-position: 30% 50%;
mask-position: 10px 5rem;
支持X軸和Y軸方向：
mask-position-X：30px;
mask-position-Y: 10px ;
由於mask-image支持多遮罩圖片，因此，mask-position也支持多屬性值，例如：
mask-position: 0 0, center;
Chrome和Firefox瀏覽器都支持mask-position屬性，Chrome還需要-webkit-私有前綴，Firefox瀏覽器現在已經不需要了。
例如，在mask-repeat值為no-repeat前提下，我們選擇屬性值為top，則遮罩效果表現為頂部居中：
在no-repeat情況下，如果容器寬高比與圖片寬高比不同，
cover：圖片寬高比不變、鋪滿整個容器的寬高，而圖片多出的部分則會被截掉；
contain:圖片自身的寬高比不變，縮放至圖片自身能完全顯示出來，所以容器會有留白區域；
七、mask-clip屬性詳細介紹
mask-clip屬性性質上和background-clip類似，但是mask-clip支持的屬性值要多一點，主要是多了個SVG元素的mask-clip支持。
支持屬性值如下：
mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;
mask-clip: no-clip;
其中默認值是border-box和background-clip類似。同樣也支持多屬性值：
mask-clip: content-box, border-box;
雖然支持的屬性值挺多，但是對於普通元素而言，生效的其實就前面3個，Firefox瀏覽器還支持no-clip。
例如，已知CSS如下：
.mask-image { width: 300px; height: 300px; -webkit-mask-image: url(Xia.png); mask-image: url(Xia.png); border: 20px solid #34538b; padding: 20px; margin: 20px; }
則我們選擇content-box效果：
fill-box，stroke-box，view-box要與SVG元素關聯才有效果，目前還沒有任何瀏覽器對其進行支持。
八、mask-origin屬性詳細介紹
mask-origin屬性性質上和background-origin類似，但是mask-origin支持的屬性值要多一點，主要是多了個SVG元素的mask-origin支持。
支持屬性值如下
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;
其中默認值是border-box和background-origin類似。同樣也支持多屬性值：
mask-origin: content-box, border-box;
雖然支持的屬性值挺多，但是對於普通元素而言，目前生效的其實就前面3個。
例如，已知CSS如下：
.mask-image { width: 250px; height: 187.5px; -webkit-mask-image: url(Xia.png); mask-image: url(Xia.png); border: 20px solid red; padding: 20px; margin: 20px; }
fill-box，stroke-box，view-box要與SVG元素關聯才有效果，目前還沒有任何瀏覽器對其進行支持。
九、mask-size屬性詳細介紹
mask-size屬性性質上和background-size類似，支持的屬性值也類似，作用是控制遮罩圖片尺寸。
默認值是auto.
支持contain和cover這兩個關鍵字：
cover：此時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小。
contain 此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。
mask-size: cover;
mask-size: contain;
支持各類數值（缺省高度會自動計算為auto）：
mask-size: 50%;
mask-size: 3em;
mask-size: 12px;
mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;
同樣支持多屬性值：
mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;
效果演示，如下CSS：
.mask-image { width: 250px; height: 187.5px; -webkit-mask-image: url(Xia.png); mask-image: url(Xia.png); -webkit-mask-size: cover; mask-image: cover; }
結果效果如下圖（Chrome和Firefox瀏覽器均如此）:
十、mask-type屬性簡介
mask-type屬性功能上和mask-mode類似，都是設置不同的遮罩模式。但還是有個很大的區別，那就是mask-type只能作用在SVG元素上，本質上是由SVG屬性演變而來，因此，Chrome等瀏覽器都是支持的。但是mask-mode是一個針對所有元素的CSS3屬性，Chrome等瀏覽器並不支持，目前僅Firefox瀏覽器支持。
由於只能作用在SVG元素上，因此默認值表現為SVG元素默認遮罩模式，也就是默認值是luminance，亮度遮罩模式。如果需要支持透明度遮罩模式，可以這么設置：
mask-type: alpha;
十一、mask-composite屬性詳細介紹
mask-composite表示當同時使用多個圖片進行遮罩時候的混合方式。支持屬性值包括：
add;遮罩累加。
subtract;遮罩相減。也就是遮罩圖片重合的地方不顯示。意味着遮罩圖片越多，遮罩區域越小。
intersect;遮罩相交。也就是遮罩圖片重合的地方才顯示遮罩，。
exclude;遮罩排除。也就是后面遮罩圖片重合的地方排除，當作透明處理。
以上屬性值，目前僅Firefox瀏覽器支持，Chrome默認mask-composite計算值是source-over，和標准默認值add有些差異，作用是一樣的，表示多個圖片遮罩效果是累加。
Chrome瀏覽器mask-composite支持的屬性值有變化，想了解的去這里
————————————————
版權聲明：本文為CSDN博主「巧克力很苦」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_44607694/article/details/90551133
喜歡這篇文章？歡迎打賞~~
