共计 2326 个字符，预计需要花费 6 分钟才能阅读完成。
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员. 如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏, 理解更多前端常识! 点我摸索新世界！
原文链接 ==>http://sylblog.xin/archives/39
前言
在 background-image 突变 gradient()那些事！和图解 background-attachment、clip、repeat、size 两篇文章中，咱们介绍了背景图片，以及背景图片的裁剪、地位、尺寸、起始地位等等属性，置信通过前两章大略能够窥得 CSS 图像天机了吧。本文咱们开始介绍其余对于图片的属性！
mask-image
从名称下面 面具 - 图片，大略就晓得这个属性是干嘛的，属性值是啥了。
用于设置元素上遮罩层的图像，能够放在所有元素上，甚至包含 svg。
不晓得有没有用过 PS，在 PS 中有一个叫做蒙版的货色，蒙版是一种灰度图像。用彩色绘制的区域将暗藏，用红色绘制的区域将可见，而用灰度绘制的区域将以不同级别的透明度呈现。
mask-image 和这个蒙版差不多，不同的是，mask-image 是不通明的中央显示，通明的中央不显示。就像是你拿一张黑纸放在电脑屏幕上，你只能看到黑纸所在区域的电脑画面，其余的中央看不到，解释道这里，置信应该明确了，如果不明确就通过上面的例子来了解吧。
兼容性
目前来看兼容性还是不错的！
相干属性
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-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>附上照片，能够本人本地跑跑试试。
总结
通过几个小例子，置信你对 mask-image, 属性应该是很相熟了，对于文章中提到的一些属性，文章尽管没有解说，然而也是很重要的，要学起来！！！能够去看我之前 background-image 属性的文章，大抵是一样的。
