面具位置 | mask-position (Masking) - CSS 中文开发手册 - Break易站

  CSS 中文开发手册

面具位置 | mask-position (Masking) - CSS 中文开发手册

这是一种实验技术

由于本技术规范未稳定，请检查各种浏览器使用的兼容性表。还要注意，随着规范的改变，实验技术的语法和行为也会随着浏览器未来版本的变化而变化。

mask-positionCSS属性相对于mask-origin对于每个定义的掩码图像设置初始位置。

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

/*  values */
mask-position: 25% 75%;

/*  values */
mask-position: 0px 0px;
mask-position: 1cm 2cm;
mask-position: 10ch 8em;

/* Multiple values */
mask-position: 0px 0px, center;

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

Initial value	0% 0%
Applies to	all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements
Inherited	no
Percentages	refer to size of mask painting area minus size of mask layer image (see the text for background-position)
Media	visual
Computed value	Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.
Animation type	repeatable list of simple list of length, percentage, or calc
Canonical order	the unique non-ambiguous order defined by the formal grammar

语法

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

值

<position>

这是用一个到四个值表示关于元素的框的边缘的二维位置的一个<position>，它可以给出相对或绝对偏移量。请注意，位置可以设置在元素的框外。

形式语法

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

例

CSS

#wrapper {
  border: 1px solid black;
  width: 250px;
  height: 250px;
}

#masked {
  width: 250px;
  height: 250px;
  background: blue linear-gradient(red, blue);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-repeat: no-repeat;
  mask-position: top right; /* Can be changed in the live sample */
  margin-bottom: 10px;
}

规格

Specification	Status	Comment
CSS Masking Module Level 1The definition of 'mask-position' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0-webkit	53.0 (53.0)	?	?	4.0-webkit

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	53.0 (53.0)	?	?	?

  CSS 中文开发手册

  本文标题：面具位置 | mask-position (Masking) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32441.html