mask-size

基线 2023

新功能

自 2023年12月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在旧版设备或浏览器中无法使用。

**mask-size** CSS 属性指定遮罩图像的大小。可以完全或部分约束图像大小以保持其固有比例。

**注意：**如果此属性的值未在应用于元素后的 mask 简写属性中设置，则此属性的值将由简写属性重置为其初始值。

语法

css
/* 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: revert;
mask-size: revert-layer;
mask-size: unset;

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

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

  • 使用关键字 contain
  • 使用关键字 cover
  • 使用宽度和高度值

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

  • 如果只给出一个值，则设置宽度，高度设置为 auto。
  • 如果给出两个值，则第一个设置宽度，第二个设置高度。

每个值可以是 <length>、<percentage> 或 auto。

值

<length>

一个 <length> 值将遮罩图像缩放为相应维度中指定的长度。不允许使用负长度。

<percentage>

一个 <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组件

如果图像具有内在比例，则使用指定的尺寸呈现它，并根据指定的尺寸和内在比例计算另一个尺寸。如果图像没有内在比例，则对该尺寸使用指定的尺寸。对于另一个尺寸，如果存在，则使用图像的对应内在尺寸。如果没有这样的内在尺寸，则使用遮罩定位区域的对应尺寸。

正式定义

初始值auto
应用于所有元素；在 SVG 中，它应用于容器元素，但不包括<defs>元素和所有图形元素
继承否
计算值按指定值，但将相对长度转换为绝对长度
动画类型可重复列表

正式语法

mask-size = 
  <bg-size>#  

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

<length-percentage> = 
  <length>      |
  <percentage>

示例

将遮罩大小设置为百分比

规范

规范
CSS 遮罩模块级别 1
# the-mask-size

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅