【CSS】mask遮罩

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

mask

今天介绍CSS的mask属性，即遮罩属性

• 它可以用于隐藏或部分隐藏一个元素的可见区域，类似于PS中的遮罩概念
• 对于遮罩
  • 如果元素添加了遮罩属性，那么目标元素将会按照遮罩的形状来显示
    • 遮罩透明的区域，元素也会透明，即该区域被隐藏
  • 通常，遮罩可以是透明的图片或者是带渐变的元素
• 属性值：
  • mask-image
  • mask-repeat
  • mask-position
  • mask-clip
  • mask-origin
  • mask-size
  • mask-mode
  • mask-composite

本文仅介绍其中常见的几种属性

（1）mask-image

• mask-image表示使用图片资源作为遮罩

  • 默认值为none，即五遮罩图片
  • 使用url()来引入图片资源，同背景图片的引入方式
    • 引入的图片资源可以是.jpg、.png、.svg等
    • 注意，linear-gradient生成的渐变也是一种图片，所以也可以使用渐变来作为遮罩

• 示例说明

  • 先使用线性渐变绘制一个带透明区域的网格背景

    .bg {
        background-image: linear-gradient(
            to top,
            #000 0%,
            #000 50%,
            transparent 50%,
            transparent 100%
        ),
            linear-gradient(to right, transparent 0%, transparent 50%, #000 50%, #000 100%);
        background-size: 50px 50px;
    }
    

  • 然后将这个渐变应用于元素的mask-image属性上

  .spider {
      border: 1px dashed #ccc;
      -webkit-mask-image: linear-gradient(
          to top,
          #000 0%,
          #000 50%,
          transparent 50%,
          transparent 100%
      ),
          linear-gradient(to right, transparent 0%, transparent 50%, #000 50%, #000 100%);
      -webkit-mask-size: 50px 50px; /* 这个属性用于控制遮罩图层的大小，在后面会介绍 */
  }
  

（2）mask-repeat

• mask-repeat表示重复遮罩，作用效果同背景属性background-repeat类似

  • 属性值：
    • repeat：默认值，表示重复
    • repeat-x：表示在水平方向上重复
    • repeat-y：表示在垂直方向上重复
    • no-repeat：表示不重复
    • space：表示平铺
    • round：表示尽量靠在一起

• 示例说明

  • 这里找到一张圆形图片作为遮罩处理

    .spider1 {
        -webkit-mask-image: url('./mask.ico');
        -webkit-mask-repeat: repeat; /* 默认值，表示重复 */
    }
    .spider2 {
        -webkit-mask-image: url('./mask.ico');
        -webkit-mask-repeat: no-repeat; /* 表示不重复 */
    }
    

    

（3）mask-position

• mask-position属性和background-position属性的表现类似，用于控制遮罩的作用位置

  • 属性值：
    • 关键字：top、bottom、left、right、center
      • 如果只有一个关键字，则默认缺省的关键字为center
    • 数值：%、px、em、rem等
    • 默认值为 0% 0%，即左上角

• 示例说明

  .spider1 {
      -webkit-mask-image: url('./mask.ico');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: right;
  }
  .spider2 {
      -webkit-mask-image: url('./mask.ico');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: left;
  }
  

  

（4）mask-clip

• mask-clip的表现也和background-clip的表现类似
  • 属性值：
    • content-box、padding-box、border-box
    • fill-box、stroke-box、view-box
    • no-clip
  • 这个属性需要搭配盒模型相关属性才能看到效果，如margin、padding等

（5）mask-origin

• mask-origin用于设置遮罩的起始位置，其行为与表示和background-origin类似
  • 主要属性值有：
    • content-box、border-box
    • margin-box、padding-box
    • fill-box、stroke-box、view-box
  • 这个属性需要搭配盒模型相关属性才能看到效果，如margin、padding等

（6）mask-size

• mask-size用于控制图片的尺寸，其效果和行为与background-size类似

  • 属性值：
    • 关键字：
      • contain：使图片完全适应元素区域，保证最短边能够完全显示，剩余部分会自动重复以填充，会保持图片原有宽高比
      • cover：使图片完全覆盖背景区域，保证最长边能够完全填充元素区域，会保持图片原有宽高比
      • auto：自适应
    • 数值：%、em、px、rem

• 示例代码

  .spider1 {
      -webkit-mask-image: url('./mask.ico');
      -webkit-mask-repeat: no-repeat;
  }
  .spider2 {
      -webkit-mask-image: url('./mask.ico');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: cover;
  }