遮罩原点 | CSS-Tricks 中文

mask-origin 指定遮罩层图像的遮罩位置区域。换句话说，它定义了遮罩层图像的原点位置，无论是边框、填充或内容框的边缘。

.element {
  mask-image: url(star.svg);
  mask-origin: content-box;
}

对于渲染为单个框的元素，mask-origin 指定遮罩定位区域。对于渲染为多个框的元素（例如，多行内联框、多页框），该属性指定 box-decoration-break 在哪些框上操作以确定遮罩定位区域。

此属性类似于 background-origin 属性，除了它具有不同的初始值和三个适用于 SVG 元素的附加值。

在以下演示中，您可以更改遮罩层图像的原点。底部有相同的图像，以更好地显示遮罩效果并标记边框和填充区域

语法

mask-origin: <geometry-box> = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

初始值： border-box
应用于：所有元素。在 SVG 中，它适用于容器元素，但不包括 <defs> 元素、所有图形元素和 <use> 元素。
继承：否
动画类型：离散

值

/* Keywords */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;
 
/* Global values */
mask-origin: intial;
mask-origin: inherit;
mask-origin: unset;

值定义

content-box: 位置相对于内容框。 mask-image 的原点位于内容边缘的左上角。
padding-box: 位置相对于填充框。 0 0 处遮罩图像的原点位于填充边缘的左上角，100% 100% 为右下角。
border-box: 默认值，将位置相对于边框框。
margin-box: 位置相对于边距框
fill-box: 位置相对于对象边界框
stroke-box: 位置相对于描边边界框
view-box: 使用最近的 SVG 视窗作为参考框。如果为创建 SVG 视窗的元素指定了 viewBox 属性，则参考框位于 viewBox 属性建立的坐标系的原点处，参考框的尺寸设置为 viewBox 属性的 width 和 height 值。
initial: 应用属性的默认设置，即 border-box
inherit: 采用父元素的 mask-origin 值。
unset: 从元素中删除当前 mask-origin。

使用多个值

此属性可以接受逗号分隔的遮罩原点值列表，其中每个值都应用于在 mask-image 属性中指定的对应遮罩层图像。在以下示例中，第一个值指定第一个图像的原点，第二个值指定第二个图像的原点，依此类推。

.element {
  mask-image: url(image1.png), url(image2.png), url(image3.png);
  mask-origin: padding-box, border-box, content-box;
}

笔记

对于没有关联 CSS 布局框的 SVG 元素，值 content-box、padding-box 和 border-box 计算为 fill-box。
对于具有关联 CSS 布局框的元素，值 fill-box、stroke-box 和 view-box 计算为 mask-origin 的 initial 值，即 border-box。