cyanine

css mask的原理：只会把遮罩图里透明像素所对应的原图部分进行隐藏。
所以一般通过mask-image:url()的形式引入svg格式的图片进行遮盖。
还可以搭配background-image: linear-gradient(direction, color-stop1, transparents);进行渐变的隐藏效果。

例如
background-image: linear-gradient(to right, red , yellow);表示创建一个从由右红到左黄的渐变背景色。

而transparent表示完全透明。

所以全部加在一起

    .mask {
      width: 200px;
      height: 200px;
      background-color: blue;
      -webkit-mask-image: linear-gradient(to bottom,transparent 50%,black);
      mask-image: linear-gradient(to bottom,white,white);
    }

效果是一个从上隐到下面变为蓝色的正方形。