css mask遮罩层详解

mask简介

css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。mask和background用法是相仿的，mask的值有这些：

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type

下面具体介绍每一个值的意义

1. mask-clip

值	含义
content-box	将绘制的内容剪切到内容框中。
padding-box	将绘制的内容剪切到padding框中。
border-box	将绘制的内容剪切到border框中。
margin-box	将绘制的内容剪切到margin框中。
fill-box	将绘制的内容剪切到对象边界框中。
stroke-box	将绘制的内容剪切到stroke边界框中。
view-box	使用最近的SVG视口作为参考框。如果为创建SVG视口的元素指定了viewBox属性，则参考框位于由viewBox属性建立的坐标系的原点，并且参考框的尺寸被设置为viewBox属性的宽度和高度值。
no-clip	没有被剪切。

mask-clip的默认值是border-box，而且支持多属性值，例如：

mask-clip: content-box, border-box;

虽然支持的属性值挺多，但是对于普通元素而言，生效的其实就前面4个，Firefox浏览器还支持no-clip。fill-box，stroke-box，view-box要与SVG元素关联才有效果，目前还没有任何浏览器对其进行支持。

2. mask-composite

值	含义
add	遮罩累加。
subtract	遮罩相减。也就是遮罩图片重合的地方不显示。
intersect	遮罩相交。也就是遮罩图片重合的地方才显示遮罩。
exclude	遮罩排除。也就是后面遮罩图片重合的地方排除，当作透明处理。

以上属性值，目前仅Firefox浏览器支持，Chrome默认mask-composite计算值是source-over，和标准默认值add有些差异，作用是一样的，表示多个图片遮罩效果是累加。

3. mask-image

mask-image指遮罩使用的图片资源，默认值是none，也就是无遮罩图片。所谓遮罩，就是原始图片只显示遮罩图片非透明的部分。

mask-image也支持多属性值，例如：

mask-image: url(...), url(...);

4. mask-mode

mask-mode属性的默认值是match-source，意思是根据资源的类型自动采用合适的遮罩模式。

例如，如果我们的遮罩使用的是SVG中的<defs>中的<mask>元素，则此时的mask-mode属性的计算值是luminance，表示基于亮度遮罩。如果是其他场景，则计算值是alpha，表示基于透明度遮罩。

值	含义
alpha	基于透明度遮罩
luminance	基于亮度遮罩
match-source	根据资源的类型自动采用合适的遮罩模式

mask-mode也支持多属性值，例如：

mask-mode: alpha, match-source;

目前，mask-mode仅Firefox浏览器支持，因此，Chrome浏览器是看到的依然是基于alpha遮罩的效果，颜色不像上图那样淡。

5. mask-repeat

值	含义
repeat-x	水平x平铺
repeat-y	垂直y平铺
repeat	默认值，水平和垂直平铺
no-repeat	不平铺
space	表示遮罩图片尽可能的平铺同时不发生任何剪裁
round	表示遮罩图片尽可能靠在一起没有任何间隙，同时不发生任何剪裁。这就意味着图片可能会有比例的缩放。

mask-repeat也支持多属性值，例如：

mask-repeat: space round, no-repeat;

6. mask-position

支持单个关键字，如top，bottom，left，right，center（缺省关键字的解析为center）

支持各类数值（百分数或数值），例如：mask-position: 30% 50%;

mask-position也支持多属性值，例如：mask-position: 0 0, center;

Chrome和Firefox浏览器都支持mask-position属性，Chrome还需要-webkit-私有前缀，Firefox浏览器现在已经不需要了。

7. mask-origin

值	含义
content-box	位置相对于内容框。
padding-box	位置相对于padding框。
border-box	位置相对于border框。
margin-box	位置相对于margin框。
fill-box	位置相对于对象边界框。
stroke-box	位置相对于stroke边界框。
view-box	使用最近的SVG视口作为参考框。如果为创建SVG视口的元素指定了viewBox属性，则参考框位于由viewBox属性建立的坐标系的原点，并且参考框的尺寸被设置为viewBox属性的宽度和高度值。

mask-origin的默认值是border-box，而且支持多属性值，例如：

mask-origin: content-box, border-box;

虽然支持的属性值挺多，但是对于普通元素而言，生效的其实就前面4个。fill-box，stroke-box，view-box要与SVG元素关联才有效果，目前还没有任何浏览器对其进行支持。

8. mask-size

mask-size作用是控制遮罩图片尺寸，默认值是auto。

支持contain和cover这两个关键字

支持各类数值（缺省高度会自动计算为auto），例如：mask-size: auto 6px;

同样支持多属性值，例如：mask-size: 50%, 25%, 25%;

9. mask-type

mask-type属性功能上和mask-mode类似，都是设置不同的遮罩模式。但还是有个很大的区别，那就是mask-type只能作用在SVG元素上，本质上是由SVG属性演变而来，因此，Chrome等浏览器都是支持的。但是mask-mode是一个针对所有元素的CSS3属性，Chrome等浏览器并不支持，目前仅Firefox浏览器支持。

由于只能作用在SVG元素上，因此默认值表现为SVG元素默认遮罩模式，也就是默认值是luminance，亮度遮罩模式。如果需要支持透明度遮罩模式，可以这么设置：mask-type: alpha;

链接: https://www.fly63.com/article/detial/12211