css mask遮罩层详解
source link: https://www.fly63.com/article/detial/12211
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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;
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK