【CSS】mask遮罩

出于对b站视频为什么不遮挡人物的好奇，查看了相关的图片和相关文档，发现图片是类似于一个PS的遮罩层：

这张图片是怎么来的，肯定是AI识别出来然后生成的，一张图片也就一两K，一次加载很多张也不会造成很大的负担。查找文档，主要利用了以下属性：

详细相关mark属性：

它可以用于隐藏或部分隐藏一个元素的可见区域，类似于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;
}

猜你喜欢