mask-position

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
相关话题

mask-position CSS property sets the initial position, relative to the mask position layer set by mask-origin , for each defined mask image.

/* 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: unset;

句法

One or more <position> values, separated by commas.

值

<position>

形式定义

初始值	`center`
适用于	all elements; In SVG, it applies to container elements excluding the `defs` element and all graphics elements
继承	no
百分比	refer to size of mask painting area minus size of mask layer image (see the text for `background-position` )
计算值	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.
动画类型	repeatable list of simple list of length, percentage, or calc

形式句法

<position>#where 
<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> ] ]
where 
<length-percentage> = <length> | <percentage>

范例

Setting mask position

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;
}

HTML

<div id="wrapper">
  <div id="masked">
  </div>
</div>
<select id="maskPosition">
  <option value="top">top</option>
  <option value="center">center</option>
  <option value="bottom">bottom</option>
  <option value="top right" selected>top right</option>
  <option value="center center">center center</option>
  <option value="bottom left">bottom left</option>
  <option value="10px 20px">10px 20px</option>
  <option value="60% 20%">60% 20%</option>
</select>

JavaScript

var maskPosition = document.getElementById("maskPosition");
maskPosition.addEventListener("change", function (evt) {
  document.getElementById("masked").style.maskPosition = evt.target.value;
});

结果

规范

规范	状态	注释
CSS Masking Module Level 1 The definition of 'mask-position' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`mask-position`	Chrome 完整支持 1 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge 完整支持 18	Firefox 完整支持 53 完整支持 53 不支持 20 — 53 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 15 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari 完整支持 3.2 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android 完整支持 2 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android 完整支持 18 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Android 完整支持 53 完整支持 53 不支持 20 — 53 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 14 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari iOS 完整支持 3.2 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android 完整支持 1.0 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-
Support for three-value syntax of position	Chrome 不支持 1 — 68 Prefixed 不支持 1 — 68 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Edge 不支持 18 — 79	Firefox 不支持 53 — 70 不支持 53 — 70 不支持 20 — 53 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 15 — 55 Prefixed 不支持 15 — 55 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari 完整支持 3.2 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android 不支持 2 — 68 Prefixed 不支持 2 — 68 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Chrome Android 不支持 18 — 68 Prefixed 不支持 18 — 68 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Firefox Android 完整支持 53 完整支持 53 不支持 20 — 53 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 14 — 48 Prefixed 不支持 14 — 48 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Safari iOS 完整支持 3.2 Prefixed 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android 不支持 1.0 — 10.0 Prefixed 不支持 1.0 — 10.0 Prefixed Prefixed Implemented with the vendor prefix: -webkit-

图例

完整支持
不支持
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。

元数据

最后修改： Jul 20, 2020

CSS
CSS 参考
CSS Masking
特性
1. clip
2. clip-path
3. mask
4. mask-border
5. mask-border-mode
6. mask-border-outset
7. mask-border-repeat
8. mask-border-slice
9. mask-border-source
10. mask-border-width
11. mask-clip
12. mask-composite
13. mask-image
14. mask-mode
15. mask-origin
16. mask-position
17. mask-repeat
18. mask-size
19. mask-type

在此页

句法

值