大家好，我是半夏，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注 点赞 加我微信：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属性的文章，大致是一样的。

mask-image实现聚光灯效果的更多相关文章

  1. WPF实现聚光灯效果

    WPF开发者QQ群: 340500857  | 微信群 -> 进入公众号主页 加入组织 前言 效果仿照 CSS聚光灯效果 实现思路: 1. 设置底部Canvas背景色 #222222 . 2. ...

  2. 用CALayer实现聚光灯效果

    效果图: 代码部分: #import "ViewController.h" @interface ViewController () @property (nonatomic, s ...

  3. css3 mask遮罩动画(照明灯效果)

    <pre><!DOCTYPE html><html lang="en"><head><meta charset="U ...

  4. 简单介绍Excel单元格行列指示的实现原理(俗称聚光灯功能)

    原始出处:www.cnblogs.com/Charltsing/p/CellLight.html QQ:564955427 Excel单元格行列指示的实现原理(俗称聚光灯功能) 单元格行列指示功能在录 ...

  5. 关于 layer.mask = label.layer 出现空白情况

    源代码如下: self.numLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width/3, ...

  6. 使用jQuery仿淘宝商城多格焦点图滚动切换效果

    1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...

  7. Tensorflow实现Mask R-CNN实例分割通用框架，检测，分割和特征点定位一次搞定（多图）

    Mask R-CNN实例分割通用框架,检测,分割和特征点定位一次搞定(多图)   导语:Mask R-CNN是Faster R-CNN的扩展形式,能够有效地检测图像中的目标,同时还能为每个实例生成一个 ...

  8. 图像分割-Mask Scoring R-CNN

    转载:https://zhuanlan.zhihu.com/p/58291808 论文链接:https://arxiv.org/abs/1903.00241 代码链接:https://github.c ...

  9. 奇妙的 CSS MASK

    本文将介绍 CSS 中一个非常有意思的属性 mask . 顾名思义,mask 译为遮罩.在 CSS 中,mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 ...

随机推荐

  1. 什么是MVC模式? 　　

    MVC (Model View Controller) 是一个设计模式,使用MVC应用程序被分成三个核心部件:模型.视图.控制器.它们各自处理自己的任务.M是指数据模型,V是指用户界面,C则是控制器. ...

  2. Spring 框架的事务管理有哪些优点？

    它为不同的事务 API 如 JTA,JDBC,Hibernate,JPA 和 JDO,提供 一个不变的编程模式. 它为编程式事务管理提供了一套简单的 API 而不是一些复杂的事务 API 它支持声明式 ...

  3. 数仓建模—OneID

    今天是我在上海租房的小区被封的第三天,由于我的大意,没有屯吃的,外卖今天完全点不到了,中午的时候我找到了一包快过期的肉松饼,才补充了1000焦耳的能量.但是中午去做核酸的时候,我感觉走路有点不稳,我看 ...

  4. 串联型PID，并联型PID与标准型PID简要说明

    PID广泛应用于工业生产各个环节,然而对于不同PID结构会有一些差异,导致在调参时若按照常规的经验调试,结果将会有非常大的不同. 串联型PID(Serial PID) 串联型PID的三个环节由比例,积 ...

  5. Thoughtworks Technology Radar #26 技术雷达26期

    Thoughtworks Technology Radar #26 Techniques Adopt Four key metrics Google Cloud's DevOps Research a ...

  6. 如何更愉快地使用rem —— 别说你懂CSS相对单位

    前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...

  7. 前端react+redux+koa写的博客推荐

    React-Node搭建的博客 曾经用的php+mysql+js写的博客,现在看来已经很low了,所以用目前最火的react+koa框架重构一下.先上地址吧:目前线上版本http://www.liuw ...

  8. java中程序，进程和线程的区别

    2.程序,进程和线程的区别 马克-to-win:程序,进程和线程的区别是什么?这个问题比较抽象难理解,但又非常重要.我并不想给出一大堆抽象的学术解释,那样只能误国误民.所以我先给大家举一个例子.马克- ...

  9. 子线程中如何修改ui界面

    1.Android进程 一个应用程序被启动时,系统默认创建执行一个叫做"main"的线程.这个线程也是你的应用与界面工具包(android.widget和android.view包 ...

  10. XUtils 开发框架

    xUtils简介 xUtils 包含了很多实用的android工具. xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(10种谓词) ...