CSS3的遮罩（mask）

# CSS3的遮罩（mask）

# 什么是mask？

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

mask其实是众多mask-*属性的缩写，具体有哪些属性可以看下面：

mask-image
- 指遮罩使用的图片资源，默认none
mask-mode
- 根据资源类型自动采用合适的模式，有3个值：alpha、luminance、match-source
mask-repeat
- 是否重复，默认为repeat，类似于background-repeat
- 支持这些关键字：repeat-x、repeat-y、repeat、no-repeat、space、round
mask-position
- 表示呈现位置，与background-position基本一致
- 支持单个或双个关键字：top、bottom、left、right、center
- 支持数值和百分比
mask-clip
- 与background-clip属性性质类似，但mask-clip支持的属性值要更多
- 支持的属性值：border-box(默认值)、content-box、padding-box、fill-box、stroke-box、view-box、no-clip
- 对于普通元素只会生效前三个
mask-origin
- 与background-origin属性类似，它设定遮罩图片在指定区域内绘制
- 支持的属性值：border-box(默认值)、content-box、padding-box、fill-box、stroke-box、view-box
- 同样，生效的只有前三个
mask-size
- 与background-size属性类似，控制遮罩图片的尺寸，默认值为auto
- 支持关键字：contain、cover
- 支持数值和百分比
mask-type
- mask-type属性功能上和mask-mode类似，都是设置不同的遮罩模式。
- 但还是有个很大的区别，那就是mask-type只能作用在SVG元素上，本质上是由SVG属性演变而来，因此，Chrome等浏览器都是支持的。但是mask-mode是一个针对所有元素的CSS3属性，Chrome等浏览器并不支持，目前仅Firefox浏览器支持。
mask-composite
- add
  - 遮罩累加。
- subtract
  - 遮罩相减。也就是遮罩图片重合的地方不显示。意味着遮罩图片越多，遮罩区域越小。
- intersect
  - 遮罩相交。也就是遮罩图片重合的地方才显示遮罩，。
- exclude
  - 遮罩排除。也就是后面遮罩图片重合的地方排除，当作透明处理。
- 以上属性值，目前仅Firefox浏览器支持，Chrome默认mask-composite计算值是source-over，和标准默认值add有些差异，作用是一样的，表示多个图片遮罩效果是累加。
详情参考张鑫旭大佬的：客栈说书：CSS遮罩CSS3 mask/masks详细介绍 (opens new window)

# 使用mask

我们来用mask实现一些简单的效果。

# 使用mask进行图片裁剪

使用线性渐变，我们实现一个简单的切角图形：

.notching {
    width: 200px;
    height: 120px;
    background:
        linear-gradient(135deg, transparent 15px, deeppink 0) top left,
        linear-gradient(-135deg, transparent 15px, deeppink 0) top right,
        linear-gradient(-45deg, transparent 15px, deeppink 0) bottom right,
        linear-gradient(45deg, transparent 15px, deeppink 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

1
2
3
4
5
6
7
8
9
10
11

我们使用mask也可以实现上面的效果：

.notching {
    width:200px;
    height:120px;
    background: orange;
    -webkit-mask:
        linear-gradient(135deg, transparent 15px, #fff 0) top left,
        linear-gradient(-135deg, transparent 15px, #fff 0) top right,
        linear-gradient(-45deg, transparent 15px, #fff 0) bottom right,
        linear-gradient(45deg, transparent 15px, #fff 0) bottom left;
    -webkit-mask-size: 50% 50%;
    -webkit-mask-repeat: no-repeat;
}

1
2
3
4
5
6
7
8
9
10
11
12

注意：除了火狐外其它浏览器使用mask需要前缀。

# 实现”PVP对决“效果

主要代码：

.notching {
    position: relative;
    background: url(lol1.jpg) no-repeat 123px -156px;
    background-size: cover;
    width: 1200px;
    height: 70vh;
}

.notching::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(lol2.jpg) no-repeat -360px -45px;
    background-size: cover;
    -webkit-mask: linear-gradient(45deg, #000 50%, transparent 50%);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

两张图片，一张完全重叠在另外一张之上，然后使用 mask: linear-gradient(45deg, #000 50%, transparent 50%) 分割两张图片：

随后我们可以修改一下mask内的渐变：

{
- -webkit-mask: linear-gradient(45deg, #000 50%, transparent 50%)
+ -webkit-mask: linear-gradient(66deg, #000 40%, transparent 55%);
}

1
2
3
4
5

如果没有达到上图效果，可以修改一下图片位置和mask角度和颜色百分比。

除此之外还可以实现很多转场动画等，详情参考奇妙的 CSS MASK (opens new window)和客栈说书：CSS遮罩CSS3 mask/masks详细介绍 (opens new window)

在GitHub上编辑

#css

上次更新: 10/7/2021, 4:06:01 PM

← CSS3 resize属性 flex布局语法→