面具大小 | 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> 将掩码图像缩放到相应维度中指定的长度。不允许负长度。

<percentage>将掩码图像的对应维数缩放到掩码定位区域的指定百分比，该百分比由mask-origin在默认情况下，掩码定位区域是包含盒及其填充内容的区域；该区域也可以更改为仅内容或包含边界、填充和内容的区域。不允许负百分比。

auto一个关键字，它将掩码图像按相应的方向缩放，以保持其内在的比例。

contain一个关键字，缩放图像尽可能大，并保持图像纵横比(图像不被压扁)。这张图片是在货柜内装的。图像自动居中，除非被另一个属性(如mask-position)覆盖。

cover一个关键字，它是contain缩放图像尽可能大，并保持图像纵横比(图像不会被压扁)。图像“覆盖”容器的整个宽度或高度。当图像和容器有不同的尺寸时，图像在左/右或在顶部/底部被剪切。

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

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

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

如果mask-size是contain或cover：图像是通过保持其在掩膜定位区域内或覆盖的最大尺寸的固有比例来呈现的。如果图像没有内在比例，则按掩模定位区域的大小呈现。

如果mask-size是auto或auto auto：如果图像具有两个内在维度，则按该大小呈现。

如果它没有内在尺寸和本征比例，则按掩模定位区域的大小呈现。

如果它没有尺寸，但有一个比例，它就呈现为包含已指定的内容，就像contain已经被指定了。

如果图像有一个内在的维度和一个比例，它的大小由一个维度和比例决定。

如果图像有一个内在的维度，但没有比例，则是利用掩模定位区域的固有维度和相应的维度呈现的。

如果mask-size有一个auto组件和一个非-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)	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18