很少有人用到的css3遮罩

Posted 2021-04-09 前端客

我们看见过一种效果，就是一个图形可以显示出啊下方的图片，当然也可以叫蒙板。

遮罩层图像

 

白色区域为透明状态

要展示的图像

   

使用mask之后产生的效果图

 

mask 的属性：

-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/

-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat

-webkit-mask-position:x y;

-webkit-mask-clip:border | padding | content

-webkit-mask-origin:border | padding | content

来我们看代码吧！

html：

<div class="mask"></div>

css：

.mask {
  width: 1000px;
  height: 800px;
  border: 5px solid red;
  background-image: url("http://image.tianjimedia.com/uploadImages/2015/129/59/5TPKKEQ96FSC_1000x500.jpg");
  background-size: 100% 100%;

  -webkit-mask:url("mask.png") no-repeat 0 0;
  /*动画*/
  transition: 2s;
}
.mask:hover {
  -webkit-mask:url("mask.png") no-repeat 50% 50%;
}

今天小六分享的内容，各位前端客们get到了么？

欢迎更多前端客们加入进来，对每天推送的内容进行点评、纠错，如果你有想要与大家分享的前端技巧，欢迎给前端客投稿。

前  端  客

简 单 高 效

qianduan_ke

长按关注