开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

前言：

成功没有捷径但成长有路径

css必备场景。专注积累，每天记录一个知识点，老概念新理解，重点记录一下

正文

背景

css里面的mask-image属性。我之前并不知道这个属性，某一天翻文档的时候看到了这个渐变遮罩，同样的效果我之前也写过，当时用的两个加渐变的div前置遮挡，效果是出来了但这样有个问题，被遮挡的那个无法点击，而且因为遮罩层颜色是固定的，当背景色不是白色的时候，这个组件是没法复用的。没做出来始终是个遗憾，这次遇到了，就详细整理下这个需求的实现方法。

这样的一个效果，渐变遮罩且可点击

基础属性

我们需要先来了解下用到的以下几个属性

mask-image 文档

用于设置元素上遮罩层

linear-gradient 文档

两种或多种颜色线性渐变

pointer-events: 文档

当值为none时，元素永远不会成为鼠标事件的target，也就是我们常说的，实现了鼠标点击穿透。

模拟场景一个li菜单

<div className="wrap">
  <ul>
    <li>快速上手</li>
    <li>开发一个Blog</li>
    <li>API</li>
    <li>配置</li>
    <li>运行时配置</li>
    <li>命令行</li>
  </ul>
</div>

方法1

渐变+pointer-event:none

像上文介绍的两个加渐变的div前置遮挡也是可以的，用伪元素叠加两个从透明到白色的渐变层，定位到位置上，最主要的是实现遮罩层下方按钮可点击，只要在遮罩层加一个pointer-event：none，鼠标穿透就可以了。

css

.wrap {
  position: relative;
  border: 1px solid #999;
  width: 500px;

  ul {
    padding: 5px;
    height: 300px;
    overflow: scroll;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(0deg, transparent, #fff);
    pointer-events: none;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, transparent, #fff);
    pointer-events: none;
  }
}

方法2

mask-image 遮罩

方法1解决不了背景色切换的问题，而css提供的mask 可以很好的解决这个问题，也不需要使用pointer-event：none(裁切当前层，不存在遮挡)，代码简单不需要使用伪类。

mask的原理类似ps的剪切蒙版功能，设置了以后，只有非透明部分(颜色不重要，只跟颜色的透明度有关，或者图片的形状)，只有非透明部分覆盖到的区域可以显示，其他区域透明。

css

ul {
  padding: 5px;
  height: 300px;
  overflow: scroll;
  mask-image: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, .6) 15%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 1) 75%,
      rgba(255, 255, 255, .6) 85%,
      rgùa(255, 255, 255, 0) 100%);
}

总结

带着问题找答案，积累的多了自然有柳暗花明的一天。