1. Web
  2. CSS
  3. mask-position

mask-position

Baseline 2023
新推出

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

mask-position CSS 属性为每个已定义的遮罩图像设置初始位置，该位置相对于由 mask-origin 设置的遮罩位置图层。

语法

css
/* Single <position> keyword value */
/* Sets second value to 'center' */
mask-position: left;
mask-position: center;
mask-position: right;
mask-position: top;
mask-position: bottom;

/* Two <position> keyword values */
mask-position: left center;
mask-position: right top;

/* One length or percentage <position> value */
/* Horizontal position. Vertical position set to 'center' */
mask-position: 25%;
mask-position: 0px;
mask-position: 8em;

/* Two length or percentage <position> values */
/* First value: horizontal position. Second value: vertical position */
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/* Edge offsets: Four <position> values */
mask-position: bottom 10px right 20px;
mask-position: right 3em bottom 10px;
mask-position: bottom 10px right 0;

/* Multiple <position> values */
mask-position:
  top left,
  bottom 10px right 10px;
mask-position:
  1rem 1rem,
  center;

/* Global values */
mask-position: inherit;
mask-position: initial;
mask-position: revert;
mask-position: revert-layer;
mask-position: unset;

值

一个或多个 <position> 值，以逗号分隔。

<position>

一个、两个或四个值，表示一个二维位置，指定元素盒子的边缘。可以给出相对或绝对的偏移量。

描述

mask-position 属性定义了每个遮罩图层的位置。一个元素可以应用多个遮罩图层。图层的数量由 mask-image 属性值中以逗号分隔的值的数量决定（即使是 none 值也会创建一个图层）。

以逗号分隔的值列表中的每个 mask-position 值都会按顺序与 mask-image 值列表中定义的相应遮罩图层进行匹配。如果这两个属性中的值的数量不同：

  • 如果 mask-position 的值多于 mask-image，则 mask-position 的多余值将不被使用。
  • 如果 mask-position 的值少于 mask-image，则 mask-position 的值会重复使用。

每个 mask-position 定义了其关联的遮罩图层相对于其关联的 mask-origin 值的位置。mask-origin 属性值也类似地与 mask-image 值按顺序匹配，多余的 mask-position 值将被忽略，或者如果 mask-position 值的数量少于 mask-origin 值，则会重复使用。因此，每个遮罩图层都有一个关联的 mask-origin 和 mask-position 值。

如果未设置 mask-origin，则其值默认为 padding-box，这意味着每个 mask-position 的原点是元素的内边距盒子。

单值语法

如果只指定了一个 mask-position 值，则第二个值假定为 center。如果该值是 <length> 或 <percentage>，它定义了遮罩沿水平轴的位置，而遮罩在原点盒子内垂直居中。例如，mask-position: 0%; 等同于 mask-position: 0% center。

如果你使用单个关键字进行定位，另一个值将解析为 center。mask-position 的默认值是 0% 0%，这等同于 mask-position: top left。然而：

  • mask-position: top; 等同于 mask-position: top center;。
  • mask-position: left; 等同于 mask-position: center left。
  • mask-position: center; 等同于 mask-position: center center。

如果该值是 <length> 值，它表示从遮罩定位区域的左边缘开始的水平位置偏移量。正值表示从盒子容器左边缘向内的偏移。可以使用负值将位置设置在元素盒子之外——这会创建一个向外的偏移，将项目放置在容器左边缘之外。

百分比值

<percentage> 值表示遮罩相对于容器宽度的水平位置值，该位置相对于左边缘。然而，这个偏移量不是从遮罩边缘到盒子边缘的距离。相反，遮罩图像的尺寸会从容器的尺寸中减去，然后将结果值的百分比用作从盒子左边缘开始的直接偏移量，这与 background-position 的百分比值相同。

公式是：

（容器尺寸 - 遮罩尺寸） * 位置百分比 = 尺寸偏移值

给定一个 100px 宽的遮罩和一个 1000px 宽的原点盒子，设置 mask-position: 10%;（等同于 10% 50%）会使遮罩在距离左边缘 90px 的位置垂直居中。公式是 (1000 - 100) * 10% = 90。如果左偏移量是 0%，遮罩的左边缘将与容器的左边缘齐平（(1000 - 100) * 0% = 0）。

如果左偏移量是 100%，遮罩的右边缘将与容器的右边缘齐平，因为 100px 宽的遮罩的左边缘将距离容器左边缘 900px（(1000 - 100) * 100% = 900）（100px 的遮罩宽度加上 900px 的左边缘距离意味着右边缘距离左边缘 1000px，也就是容器的右边缘）。

双值语法

一个双值 <position> 指定了遮罩图像在其遮罩定位区域内的位置，长度和百分比值指定了相对于该区域左边和上边的偏移量。

如果两个值是 <length> 值、<percentage> 值或关键字 center，则第一个值表示从遮罩定位区域左边缘开始的水平位置偏移，第二个值表示从其上边缘开始的垂直位置偏移，其中百分比是根据遮罩在该维度上的尺寸进行偏移的。

此外，如果指定了 <percentage> 值，第一个值也是相对于左边缘的水平位置值，第二个值也是相对于上边缘的垂直位置值。

一对特定于轴的关键字可以重新排序，一个特定于轴的关键字和长度或百分比也可以重新排序，但两个长度或百分比值是不可互换的。如果两个值中有一个是 top、right、bottom 或 left，则这两个值的顺序无关紧要。值对中的任何 center 或 <length-percentage> 值将应用于另一个维度。

四值语法

四值语法由两对值组成，每对包含一个指定偏移边缘的关键字，以及一个指定偏移距离的 <length> 或 <percentage> 值。例如，mask-position: left 1em top 2em 指定了从左盒子边缘开始 1em 的水平偏移和从上边缘开始 2em 的垂直偏移。其等效的双值语法是 mask-position: 1em 2em。

因为在使用四值语法时我们定义了偏移的边缘，所以顺序并不重要：mask-position: top 2em left 1em 和 mask-position: left 1em top 2em 都会产生相同的结果。

四值语法的真正强大之处在于它允许我们指定除 left 和 top 之外的偏移边缘。例如，mask-position: bottom 10px right 20px 创建了一个从下边缘向上 10px 的垂直偏移和一个从右边缘向左 20px 的水平偏移。通常，四值语法用于从下和/或右边缘进行偏移。但如果你记不住双值语法的偏移边缘顺序，这个语法也很有帮助。

需要注意的一点是，与 background-position 的 <bg-position> 数据类型值不同，mask-position 的 <position> 值不允许三值语法，也不允许从 center 进行偏移。当从 bottom 或 right 偏移遮罩时，mask-position 需要声明所有四个值。

要使四值语法有效，它需要指定 top 或 bottom 作为垂直偏移边缘，以及垂直的长度或百分比偏移值，并指定 left 或 right 作为水平偏移边缘，以及水平的长度或百分比偏移值。

正式定义

初始值0% 0%
应用于所有元素；在 SVG 中，它适用于除 <defs> 元素外的容器元素以及所有图形元素
继承性否
百分比指遮罩绘制区域的大小减去遮罩图层图像的大小（参见 background-position 的文本）
计算值由两个表示原点的关键字和两个相对于该原点的偏移量组成，每个偏移量都以绝对长度（如果给定 <length>）或百分比形式给出。
动画类型一个可重复的列表

正式语法

mask-position = 
  <position>#  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

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

示例

基本用法

html
<section>
  <div></div>
</section>
css
section {
  border: 1px solid black;
  width: 250px;
  height: 250px;
}

div {
  width: 250px;
  height: 250px;
  margin-bottom: 10px;
  background: blue linear-gradient(red, blue);

  mask-image: url("/shared-assets/images/examples/mask-star.svg");
  mask-repeat: no-repeat;
  mask-position: top right;
}

规范

规范
CSS 蒙版模块 Level 1
# the-mask-position

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.