CSS参考手册
面具 | Masking
面具位置 | mask-position
这是一种实验技术
由于本技术规范未稳定,请检查各种浏览器使用的兼容性表。还要注意,随着规范的改变,实验技术的语法和行为也会随着浏览器未来版本的变化而变化。
mask-position
CSS属性相对于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) |
? |
? |
? |
面具 | Masking相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。