mask-image实现聚光灯效果

大家好，我是半夏????，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 ???? 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
成都创新互联公司是一家专业提供平坝企业网站建设,专注与成都网站设计、网站制作、H5开发、小程序制作等业务。10年已为平坝众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

原文链接 ==>http://sylblog.xin/archives/39

前言

在 background-image渐变gradient()那些事！和图解background-attachment、clip、repeat、size两篇文章中，我们介绍了背景图片，以及背景图片的裁剪、位置、尺寸、起始位置等等属性，相信通过前两章大概可以窥得CSS图像天机了吧。本文我们开始介绍其他关于图片的属性！

mask-image

从名称上面面具-图片，大概就知道这个属性是干嘛的，属性值是啥了。
用于设置元素上遮罩层的图像，可以放在所有元素上，甚至包括svg。

不知道有没有用过PS，在PS中有一个叫做蒙版的东西，蒙版是一种灰度图像。用黑色绘制的区域将隐藏，用白色绘制的区域将可见，而用灰度绘制的区域将以不同级别的透明度出现。

mask-image和这个蒙版差不多，不同的是，mask-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;
}

这里我们开始来分析：

首先：大家看到的淡黄色的边框是鼠标审查元素看到的，真正的是下面这样，并没有边框的

首先我们定义了背景颜色，淡绿色，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的位置，就可以实现

附上照片，可以自己本地跑跑试试。

总结

通过几个小例子，相信你对mask-image,属性应该是很熟悉了，对于文章中提到的一些属性，文章虽然没有讲解，但是也是很重要的，要学起来！！！可以去看我之前background-image属性的文章，大致是一样的。

文章标题：mask-image实现聚光灯效果
URL分享：http://6mz.cn/article/dsojeco.html

网站建设知识

mask-image实现聚光灯效果

前言

mask-image

兼容性

相关属性

mask-image

属性值

none;

url(jpg/png/svg);

渐变

image(url(mask.png), skyblue);

有趣的例子-聚光灯

总结

其他资讯