面具大小 | mask-size

掩模尺寸

这是一种实验技术

由于本技术规范未稳定，请检查各种浏览器使用的兼容性表。还要注意，随着规范的改变，实验技术的语法和行为也会随着浏览器未来版本的变化而变化。

mask-sizeCSS属性指定掩码图像的大小。为了保持图像的固有比率，可以完全或部分地限制图像的大小。

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

/* One-value syntax */
/* the width of the image (height set to 'auto') */
mask-size: 50%;
mask-size: 3em;
mask-size: 12px;
mask-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;
mask-size: auto auto;

/* Multiple values */
/* Do not confuse this with mask-size: auto auto */
mask-size: auto, auto;
mask-size: 50%, 25%, 25%;
mask-size: 6px, auto, contain;

/* Global values */
mask-size: inherit;
mask-size: initial;
mask-size: unset;

注意:如果该属性的值未设置为掩码，且应用于mask-size的CSS属性后，则该属性的值将被简写属性重置为其初始值。

Initial value	auto
Applies to	all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inherited	no
Media	visual
Computed value	as specified, but with relative lengths converted into absolute lengths
Animation type	repeatable list of simple list of length, percentage, or calc
Canonical order	the unique non-ambiguous order defined by the formal grammar

语法

一个或多个<bg-size>值，用逗号分隔。

阿<bg-size>可以通过以下三种方式之一指定：

使用关键字contain

使用关键字cover

使用宽度和高度值

若要使用宽度和高度指定大小，可以提供一个或两个值：

如果只给出一个值，则将宽度设置为auto的高度。

如果给定两个值，则第一组宽度和第二组高度。

每个值都可以是<length>，一<percentage>，或auto...

值

<length> 将掩码图像缩放到相应维度中指定的长度。不允许负长度。

可能的结果值解释取决于图像的内在尺寸(宽度和高度)和固有比例(宽度和高度的比率)。位图图像总是具有内在的维度和固有的比例。矢量图像可能具有复杂的维度，因此也有其固有的比例。它也可能有一个或没有内在的维度，在这两种情况下，它可能有或可能没有内在的比例。梯度被视为没有内在尺度或固有比例的图像。

然后计算掩码图像的呈现大小如下：

如果两个组件都是mask-size指定，但不指定auto：掩码图像按指定大小呈现。

形式语法

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

例

CSS内容

#masked {
  width: 200px;
  height: 200px;
  background: blue linear-gradient(red, blue
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg
  mask-size: 50%; /* Can be changed in the live sample */
  margin-bottom: 10px;
}

规格

Specification	Status	Comment
CSS Masking Module Level 1The definition of 'mask-size' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	?	No support1	53.0 (53.0)	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	53.0 (53.0)	?	?	?