說明
CSS中的mask屬性允許用戶屏蔽或剪裁特定點的圖像來實現(xiàn)，部分或完全隱藏某個元素的可見性斗幼。
好吧，這個概念可能有點不好理解抚垄，先看圖蜕窿。
看了這個等式，似乎明白點什么了吧呆馁，朋友們桐经，第一張圖就是一張普通的圖，第二張圖浙滤，黑色部分是不透明的阴挣，白色部分是透明的，用上mask之后纺腊，兩張圖重疊畔咧，黑色區(qū)域中的會顯示出來，白色區(qū)域不顯示摹菠。
用過ps的朋友盒卸，應(yīng)該很清楚，蒙版這東西次氨，這就和蒙版很像蔽介，好吧，沒用過ps的朋友，又要問蒙版是什么了虹蓄，相信看完這篇文章犀呼，你應(yīng)該連蒙版也知道了。
mask和background用法是相仿的薇组，mask的值有這些
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type
解釋
由于目前外臂，只有webkit內(nèi)核的瀏覽器支持mask屬性，所以考慮到兼容性的話律胀，用mask屬性的時候還是要想想的宋光。
今天我們主要說說 mask-image，這個比較有意思炭菌，這兩個單詞翻譯過來就是罪佳，面具 圖片，的確很形象黑低，真的就像是給元素帶上一個面具一樣赘艳。
我們直接上代碼，把上面提到那個等式克握，實現(xiàn)一下蕾管，順便說一句，mask-image 和 background-image 一樣菩暗，不僅可以取值是 圖片路徑掰曾，也可以是漸變色。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.mask{
width:475px;
height:260px;
background-image:url("http://img.blog.csdn.net/20170701221659356");
/* 取值是圖片路徑 */
-webkit-mask-image:url("http://img.blog.csdn.net/20170701221732018");
}
</style>
</head>
<body>
<div class="mask"> </div>
</body>
</html>
background-image
-webkit-mask-image
效果圖
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.mask{
width:475px;
height:260px;
background-image:url("http://img.blog.csdn.net/20170701221659356");
/* 取值是漸變色 */
-webkit-mask-image:linear-gradient(blue, transparent);
}
</style>
</head>
<body>
<div class="mask"> </div>
</body>
</html>
效果圖
我再善意的提醒下停团，-webkit-mask-image 的值應(yīng)該是一張婴梧，背景是透明色的圖，或者說有透明色客蹋，而透明色的區(qū)域塞蹭，最后都是不顯示的。
下面是mask 和 animation 配合完成的一個效果
效果圖
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@keyframes mask{
0% {-webkit-mask-position:0px 0px;}
25% {-webkit-mask-position:619px 0px;}
50% {-webkit-mask-position:0px 0px;}
75% {-webkit-mask-position:308px 0px;-webkit-mask-size:100%;}
100% {-webkit-mask-size:1000%;}
}
.mask{
width:700px;
height:392px;
background:black url("http://www.kkkk1000.com/images/mask-image/1534750163.jpg");
-webkit-mask-image:url("http://www.kkkk1000.com/images/mask-image/1534750222.jpg");
animation:mask 5s linear infinite forwards;
}
</style>
</head>
<body>
<div class="mask"> </div>
</body>
</html>
總結(jié)
說了這么多相信你也一定明白mask-image屬性了讶坯，如果還是不清楚番电，那就多看看下面這張圖吧！Ａ纠拧漱办！
