mask-size

在 CSS 中，mask-size 属性指定遮罩层图像的大小。在许多方面，它的工作方式与background-size 属性非常相似。

.element {
  mask-image: url(star.svg);
  mask-size: 200px 100px;
}

遮罩允许您显示元素的选定部分，同时隐藏其余部分。遮罩的大小由mask-size 属性定义。

在下面的演示中，您可以随意调整遮罩层图像的大小。

语法

mask-size: <bg-size> = [ <length-percentage> = <length> | <percentage> | auto ]{1,2} | cover | contain

• 初始值：auto
• 应用于：所有元素。在 SVG 中，它应用于容器元素（不包括<defs> 元素），所有图形元素和<use> 元素。
• 继承：否
• 动画类型：可重复列表

这基本上表示语法接受一个背景大小 (<bg-size>) 值，该值可以是一个或两个长度和/或百分比 (<length-percentage>)，设置为auto，或两个关键字之一 (cover 和contain)。

• 当使用两个值时，第一个值指定遮罩图像的宽度，第二个值指定其高度。
• 当使用一个值（不是 contain 或 cover）时，它定义遮罩图像的宽度，高度假定为auto。

值

/* Lengths */
mask-size: 200px; /* width is 200px and height is auto */
mask-size: 50% 100%; /* width is 50% and height is 100% */


/* Keywords */
mask-size: contain;
mask-size: cover;


/* Global values */
mask-size: auto;
mask-size: intial;
mask-size: inherit;
mask-size: unset;

值定义

• <length>：任何有效的非负 CSS 长度，例如px、em、rem 和% 等。
• <percentage>：相对于遮罩定位区域（由mask-origin 的值设置）指定遮罩层图像的大小，该值以百分比表示。默认情况下，此值为 border-box，这意味着它包含框的边框、填充和内容。
• auto：使用遮罩图像的固有高度和宽度，对于像渐变这样的没有固有尺寸的图像，它会根据遮罩定位区域的大小进行渲染。
• contain：缩放遮罩图像，同时保持其固有比例，使其宽度和高度都能够完全适合遮罩定位区域。对于像渐变这样的没有固有尺寸的图像，它会根据遮罩定位区域的大小进行渲染。
• cover：缩放遮罩图像，同时保持其固有比例，使其宽度和高度都能够完全覆盖遮罩定位区域。对于像渐变这样的没有固有尺寸的图像，它会根据遮罩定位区域的大小进行渲染。
• initial：应用属性的默认设置，即auto。
• inherit：采用父元素的 mask-size 值。
• unset：从元素中删除当前的mask-size。

使用多个值

此属性可以采用逗号分隔的值列表作为遮罩大小，每个值应用于mask-image 属性中指定的相应遮罩层图像。

在以下示例中，第一个值指定第一个图像的大小，第二个值指定第二个图像的大小，依此类推。

.element {
  mask-image: url(image1.png), url(image2.png), url(image3.png);
  mask-size: 100px 100%, auto, contain;
}

auto 值

如果mask-size 属性的值指定为auto，如下所示

.element {
  mask-size: auto auto;
  /* or */
  mask-size: auto;
}

…那么遮罩图像会沿相应方向缩放以保持其纵横比。也就是说，根据图像的固有尺寸和比例，我们可以得到不同的结果。

比例/尺寸	无固有尺寸	一个固有尺寸	两个固有尺寸
有比例	渲染为好像已指定 contain	根据该尺寸和比例渲染成确定的大小	根据该大小渲染
无比例	根据遮罩定位区域的大小渲染	使用固有尺寸和遮罩定位区域的相应尺寸进行渲染	N/A

如果mask-size 的值与auto 和另一个非 auto 值一起指定，如下所示

.element {
  mask-size: auto 200px;
}

…那么

• 如果图像具有固有比例，则 auto 值将使用指定的尺寸和固有比例进行计算。
• 如果图像没有固有比例，则 auto 值将变为图像的对应固有尺寸（如果存在），如果不存在，则 auto 将为蒙版定位区域的对应尺寸。

理解 cover 和 contain

以下视频解释了 contain 和 cover 关键字的工作原理。请注意，蒙版图层的初始位置位于定位区域的中心。

如果图像没有固有纵横比，则指定 cover 或 contain 将使蒙版图像呈现为蒙版定位区域的大小。

到底什么是固有尺寸和固有比例？

固有尺寸是元素的宽度和高度，固有比例是它们的比率。

• 位图图像（如 PNG 格式）始终具有固有尺寸和固有比例。
• 矢量图像（如 SVG 格式）可能同时具有固有尺寸。因此，它也具有固有比例。它也可能具有一个或没有固有尺寸，并且在这两种情况下，它可能具有也可能不具有固有比例。
• 渐变就像没有固有尺寸或固有比例的图像。

演示

以下演示使用长度作为蒙版大小。尝试在代码中将值更改为其他类型的值并检查结果。

浏览器支持

IE	Edge	Firefox	Chrome	Safari	Opera
不支持	18+	53+	全部支持	4+	70

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mini
85+	79+	4.4+	全部支持	全部支持

更多信息

相关属性