记录css中使用mask-image

前言

公司大佬最近做了一个特殊盒子的hover变色，查看代码，使用了mask-image(mask-image - CSS：层叠样式表 | MDN (mozilla.org)),自己做个简单总结。

用法

借用网友的一张图来说明，第一张图就是一张普通的图，第二张图，黑色部分是不透明的，白色部分是透明的，用上mask-image之后，两张图重叠，黑色区域中的会显示出来，白色透明区域不显示。总结起来背景需要是透明色的图，或者说有透明色，而透明色的区域，最后都是不显示的。

关键代码

<div class="step">
    <div class="dashBackground"></div>
    <span class="addTitle">添加模块</span>
</div>

.step {
  position: relative;
  display: inline-block;
  color: #8c8d90;
  width: 160px;
  height: 56px;
  cursor: pointer;
}

.dashBackground {
  width: 100%;
  height: 100%;
  mask-image: url('./arrow.svg');//svg图片如下图
  background: #dcdee0;
  mask-size: cover;
}

.step:hover {
  .dashBackground {
    background: #2F3286;
  }
  .addTitle {
    color: #8c8d90;
  }
}

.addTitle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

参考

简单说 CSS中的mask—好好利用mask-image_盏茶作酒的博客-CSDN博客