mask-position

基线 2023

新功能

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

mask-position CSS 属性设置每个定义的蒙版图像的初始位置，相对于由 mask-origin 设置的蒙版位置层。

语法

css
/* Keyword values */
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/* <position> values */
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/* Multiple values */
mask-position: top right;
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>

一到四个值，表示相对于元素盒子边缘的二维位置。可以给出相对或绝对偏移量。请注意，位置可以设置为元素盒子之外。

正式定义

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

正式语法

mask-position = 
  <position>#  

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

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

示例

设置蒙版位置

将 mask-position 值更改为上面详细说明的任何允许值。如果在基于 Chromium 的浏览器中查看示例，请更改 -webkit-mask-position 的值。

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅