前言
在前面兩篇文章，我們介紹了背景圖檔，以及背景圖檔的裁剪、位置、尺寸、起始位置等等屬性，相信通過前兩章大概可以窺得CSS天機了吧。本文我們開始介紹其他關于圖檔的屬性！
mask-image
從名稱上面 面具-圖檔，大概就知道這個屬性是幹嘛的，屬性值是啥了。
用于設定元素上遮罩層的圖像，可以放在所有元素上，甚至包括svg。
不知道有沒有用過PS，在PS中有一個叫做蒙版的東西，蒙版是一種灰階圖像。用黑色繪制的區域将隐藏，用白色繪制的區域将可見，而用灰階繪制的區域将以不同級别的透明度出現。
mask-image和這個蒙版差不多，不同的是，mask-image是不透明的地方顯示，透明的地方不顯示。就像是你拿一張黑紙放在電腦螢幕上，你隻能看到黑紙所在區域的電腦畫面，其他的地方看不到，解釋道這裡，相信應該明白了，如果不明白就通過下面的例子來了解吧。
相容性
目前來看相容性還是不錯的！
相關屬性
mask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-type
上面這幾個屬性呢background-image的相關屬性用法差不多，是以某些屬性在本文中就不贅述了，想學習的童鞋，請移步首頁檢視。
mask-image
屬性值
none;
沒有圖檔，設定了這個屬性，其他的mask-* 屬性自然沒有用處了
url(jpg/png/svg);
這裡我們看一下svg的效果
首先再阿裡iconfont上複制一個svg 儲存為mk.svg
然後來使用它：
#masked {
width: 200px;
height: 200px;
background-color: #8cffa0;
-webkit-mask-image: url(./mk.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-origin:content-box;
border: 10px solid #000;
}
<div id="masked"></div> 這裡我們開始來分析：
首先：大家看到的淡黃色的邊框是滑鼠審查元素看到的，真正的是下面這樣，并沒有邊框的
首先我們定義了背景顔色，淡綠色，mask是上面的svg，mask的起始位置是内容區域，最後定義了一個邊框，最後從效果圖中我們可以得出一下結論1. mask-image 是對整個元素生效的（包括border）2. mask-image 是mask透明背景顯示，mask不透明背景看不見3. 我們是無法看到mask本身的内容的，隻能看到背景的内容。
漸變
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent 50%);
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
image(url(mask.png), skyblue);
在最新版的谷歌和火狐中均無法識别。
有趣的例子-聚光燈
效果如下：
實作邏輯：
首先是一張作為背景圖檔的人物照
一個黑色的圖檔作為mask
使用動畫來控制黑色mask的位置，就可以實作
<style>
@keyframes mask{
0% {-webkit-mask-position:0px 60px;}
15% { -webkit-mask-position:55px 50px;}
30% {-webkit-mask-position:117px 0px;}
45% { -webkit-mask-position:110px 110px; -webkit-mask-size:85px 85px;}
60% { -webkit-mask-position: 173px 8px;-webkit-mask-size: 86px 85px;}
75% { -webkit-mask-position: 193px 110px;-webkit-mask-size: 80px 80px;}
90% {-webkit-mask-position: 270px 80px;-webkit-mask-size: 90px 65px;}
100% {-webkit-mask-size:1000%;}
}
.mask {
width: 300px;
height: 200px;
background: url(./哆啦a夢.png);
-webkit-mask-repeat: no-repeat;
-webkit-mask-image: url("./black.png");
-webkit-mask-size:60px 70px;
animation: mask 5s linear infinite forwards;
}
</style>
</head>
<body>
<div class="mask"></div>
</body>