标签搜索
隐藏侧边栏

mask-image实现聚光灯效果

搞前端的半夏
2022-04-22 / 0 评论 / 0 点赞 / 232 阅读 / 2,415 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-10,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

0

评论区