遮罩位置 | CSS-Tricks 中文

CSS 年鉴 → 属性 → M → mask-position

Mojtaba Seyedi 于 2021年5月10日

在 CSS 中，mask-position 属性指定了遮罩图层图像相对于遮罩位置区域的初始位置。它的工作原理类似于 background-position 属性。

.element {
  mask-image: url("star.svg");
  mask-position: 20px center;
}

遮罩允许您显示元素的选定部分，同时隐藏其余部分。在下面的演示中，您可以更改遮罩图层图像的位置

语法

mask-position: <position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

初始值： 0% 0%
应用于：所有元素。在 SVG 中，它应用于容器元素（不包括 <defs> 元素）、所有图形元素和 <use> 元素。
继承：否
计算值：由以下组成：两个表示原点的关键字和相对于该原点的两个偏移量，每个偏移量都以绝对长度给出（如果给定 <length>），否则以百分比给出。
动画类型：可重复列表

值

可以根据偏移关键字（top、left、bottom、right 和 center）、百分比和相对于元素边缘的长度值来指定 <position>，类似于 CSS background-position 属性。

/* Offset keywords */
mask-position: top;
mask-position: right;
mask-position: bottom;
mask-position: left;
mask-position: center;
 
/* Length values */
mask-position: 100px 200px;
mask-position: 5rem 20%;
mask-position: 0 10vh;
 
/* Percentage values */
mask-position: 25% 50%;
 
/* Global values */
mask-position: intial;
mask-position: inherit;
mask-position: unset;

值定义

<length>：任何有效的 CSS 长度（例如 px、em、rem 和 % 等），它将指定遮罩图像的边缘距元素相应边缘的距离。
<percentage>：将遮罩图层图像的位置指定为相对于遮罩定位区域减去遮罩图像大小的百分比值。
top：等效于垂直位置的 0%。
right：等效于水平位置的 100%。
bottom：等效于垂直位置的 100%。
left：等效于水平位置的 0%。
center：如果未另外指定水平位置，则等效于水平位置的 50%，否则等效于垂直位置的 50%。
initial：应用属性的默认设置，即 0% 0%。
inherit：采用父元素的 mask-position 值。
unset：从元素中删除当前的 mask-position。

使用多个值

此属性可以采用以逗号分隔的值列表来表示遮罩位置，并且每个值都应用于 mask-image 属性中指定的相应遮罩图层图像。在以下示例中，第一个值指定第一个图像的位置，第二个值指定第二个图像的位置，依此类推。

.element {
  mask-image: url("image-1.png"), url("image-2.png"), url("image-3.png");
  mask-position: 100px 10%, 0 right, center;
}

不同的语法

mask-position 可以取一个、两个、三个或四个值来指定遮罩图层在水平和垂直方向上的位置。

单个值

如果设置了单个值，则将其视为水平值，并假设垂直值为 center。

mask-position: 100px; /* 100px center */

两个值

如果使用成对的值，则第一个值被视为水平值，第二个值指定 make 图层在垂直方向上的位置。

mask-position: 10% 50%; /* x=10%, Y=50% */

如果两个值都是关键字，则关键字的顺序无关紧要

mask-position: top left; /* = left top */

但是当我们组合使用关键词和长度或百分比时，**顺序很重要**，第一个值始终对应于水平偏移量。因此

mask-position: 50% right; /* = horizontal center, vertical right */
mask-position: right 50%; /* = horizontal right, vertical center */

三个值

如果给出三个值，则假定缺少的偏移量为零。

mask-position: left 100px bottom; /* left=100px bottom=0 */

四个值

四值语法允许您指定元素的哪一边您要相对于其定位蒙版（值 1 和 3），然后是距这些边的距离（值 2 和 4）。

因此，如果您想将蒙版定位在元素底部 100px 处，以及右侧 200px 处，您可以执行以下操作

mask-position: bottom 100px right 200px;

动画蒙版

可以使用关键帧动画和 CSS 过渡来动画化 mask-position 和mask-size，如下所示

.element {
  mask-image: url("mask.png");
  mask-position: 10px 10px;
  transition: mask-position 1s ease-in-out;
}
 
.element:hover {
  mask-position: right 10px bottom 10px;
}

在下一个演示中，我们使用关键帧动画来动画化蒙版层的定位。