大家好，我是半夏????，一個(gè)剛剛開始寫文的沙雕程序員.如果喜歡我的文章，可以關(guān)注? 點(diǎn)贊 ???? 加我微信：frontendpicker，一起學(xué)習(xí)交流前端，成為更優(yōu)秀的工程師～關(guān)注公眾號(hào)：搞前端的半夏,了解更多前端知識(shí)! 點(diǎn)我探索新世界！
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供平壩企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為平壩眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。
原文鏈接 ==>http://sylblog.xin/archives/39
在 background-image漸變gradient()那些事！和圖解background-attachment、clip、repeat、size兩篇文章中，我們介紹了背景圖片，以及背景圖片的裁剪、位置、尺寸、起始位置等等屬性，相信通過前兩章大概可以窺得CSS圖像天機(jī)了吧。本文我們開始介紹其他關(guān)于圖片的屬性！
從名稱上面 面具-圖片，大概就知道這個(gè)屬性是干嘛的，屬性值是啥了。
用于設(shè)置元素上遮罩層的圖像，可以放在所有元素上，甚至包括svg。
不知道有沒有用過PS，在PS中有一個(gè)叫做蒙版的東西，蒙版是一種灰度圖像。用黑色繪制的區(qū)域?qū)㈦[藏，用白色繪制的區(qū)域?qū)⒖梢?，而用灰度繪制的區(qū)域?qū)⒁圆煌?jí)別的透明度出現(xiàn)。
mask-image和這個(gè)蒙版差不多，不同的是，mask-image是不透明的地方顯示，透明的地方不顯示。就像是你拿一張黑紙放在電腦屏幕上，你只能看到黑紙所在區(qū)域的電腦畫面，其他的地方看不到，解釋道這里，相信應(yīng)該明白了，如果不明白就通過下面的例子來理解吧。
目前來看兼容性還是不錯(cuò)的！
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
上面這幾個(gè)屬性呢background-image的相關(guān)屬性用法差不多，所以某些屬性在本文中就不贅述了，想學(xué)習(xí)的童鞋，請(qǐng)移步主頁(yè)查看。
沒有圖片，設(shè)置了這個(gè)屬性，其他的mask-* 屬性自然沒有用處了
這里我們看一下svg的效果
首先再阿里iconfont上復(fù)制一個(gè)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;
}
這里我們開始來分析：
首先：大家看到的淡黃色的邊框是鼠標(biāo)審查元素看到的，真正的是下面這樣，并沒有邊框的
首先我們定義了背景顏色，淡綠色，mask是上面的svg，mask的起始位置是內(nèi)容區(qū)域，最后定義了一個(gè)邊框，最后從效果圖中我們可以得出一下結(jié)論
1. mask-image 是對(duì)整個(gè)元素生效的（包括border）
2. mask-image 是mask透明背景顯示，mask不透明背景看不見
3. 我們是無法看到mask本身的內(nèi)容的，只能看到背景的內(nèi)容。
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent 50%);
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
在最新版的谷歌和火狐中均無法識(shí)別。
效果如下：
實(shí)現(xiàn)邏輯：
首先是一張作為背景圖片的人物照
一個(gè)黑色的圖片作為mask
使用動(dòng)畫來控制黑色mask的位置，就可以實(shí)現(xiàn)
附上照片，可以自己本地跑跑試試。
通過幾個(gè)小例子，相信你對(duì)mask-image,屬性應(yīng)該是很熟悉了，對(duì)于文章中提到的一些屬性，文章雖然沒有講解，但是也是很重要的，要學(xué)起來?。?！可以去看我之前background-image屬性的文章，大致是一樣的。
