前言

最近看css大佬chokcoco的文章，发现对于mask（遮罩）这个属性没怎么学习过，就接着大佬的这篇

奇妙的 CSS MASK 文章进行简单学习，并自己实现一下文章中有意思的效果

参考文章：

奇妙的 CSS MASK

CSS mask遮罩

MASK常用属性

在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

常用属性

• mask-image：遮罩图片
• mask-repeat：是否重复
• mask-position：遮罩位置
• mask-size：遮罩尺寸

实例1

mask-image指遮罩使用的图片资源，默认值是none，也就是无遮罩图片。类似于background-image属性

下面使用这两张图片

.main{
    width: 100%;
    height:100%;
    background: url('../image/11.webp');
    mask-image: url('../image/q.png');
    mask-repeat: no-repeat;
}

效果

如 css mask遮罩 这篇文章中说的，所谓遮罩，就是原始图片只显示遮罩图片非透明的部分。

实例2

mask-image 除了使用背景图同样可以使用渐变，如下：

.main{
    width: 100%;
    height:100%;
    background: url('../image/11.webp');
    mask-image: linear-gradient(90deg, #fff,transparent);
}

效果

使用渐变同样需要遵守：所谓遮罩，就是原始图片只显示遮罩图片非透明的部分。

如果不设置透明，比如设置为mask-image: linear-gradient(90deg, #fff,#000); 那么只会显示原图片

实例3 实现切角，线性渐变

.main{
    width: 100%;
    height:100%;
    background: url('../image/11.webp');
    mask: linear-gradient(135deg, transparent 50px, #fff 0) top left;
}

实例4 径向渐变

 <div class="main"></div>

.main{
    width: 100%;
    height:100%;
    background: url('../image/11.webp');
    mask: radial-gradient(
      transparent 0%, transparent 10%,yellow 10%,yellow 20%,blue 20%,blue 30%,
      transparent 30%,transparent 40%,yellow 40%,yellow 50%,blue 50%,blue 60%,
      transparent 60%, transparent 70%,yellow 70%,yellow 70%,blue 70%,blue 80%,
      transparent 80%,transparent 90%,yellow 90%
    );
}

实例5 多张图片

.main{
    width: 100%;
    height:100%;
    background: url('../image/11.webp');
    background-size: 100%;
    position: relative;

    &::before{
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: url('../image/22.png');
        background-size: 100%;
        mask: linear-gradient(45deg, #000 50%, transparent 50%);
    }
}

正常情况，before里面的背景图会覆盖.main的背景图，但是因为设置了mask所以图片只会显示一部分

实例6

mask属性应该是可以添加多个，文章中添加了两个mask属性，可以实现两张图片互相侵入的效果，而不是如上图泾渭分明。

 mask: linear-gradient(45deg, #000 50%, transparent 50%);
 mask: linear-gradient(45deg, #000 40%, transparent 60%)

实例7

文章中有一个图片转场动画的效果，原理和上面的一样，通过动态修改mask的值来实现图片的转场。

.main {
  width: 100%;
  height: 100%;
  background: url("../image/11.webp");
  background-size: 100%;
  position: relative;

  &:hover {
    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: url("../image/22.png");
      background-size: 100% 110%;
      animation: maskRotate 2s ease-in-out;
    }
  }
}
@keyframes maskRotate {
  @for $i from 0 through 100 {
    #{$i}% {
      mask: linear-gradient(
        45deg,
        #000 #{$i + "%"},
        transparent #{$i + 5 + "%"}
      );
    }
  }
}