-webkit-mask-attachment

非标准

该特性是非标准的，请尽量不要在生产环境中使用它！

如果使用了 -webkit-mask-image, -webkit-mask-attachment 将指定蒙版在视口的位置是固定的，还是同包含块一起滚动的。

/* 关键字 */
-webkit-mask-attachment: scroll;
-webkit-mask-attachment: fixed;
-webkit-mask-attachment: local;

/* 多个值 */
-webkit-mask-attachment: scroll, local;
-webkit-mask-attachment: fixed, local, scroll;

/* 全局值 */
-webkit-mask-attachment: inherit;
-webkit-mask-attachment: initial;
-webkit-mask-attachment: unset;

初始值scroll
适用元素all elements
是否是继承属性否
计算值as specified
Animation typediscrete

语法

可用的值

scroll
使用 scroll 时, 蒙版在视口中同包含它的块一起滚动。
fixed
使用 fixed 时, 蒙版不会同包含它的元素一起滚动，而是在视口中固定不动。

使用语法

<attachment>#
where 
<attachment> = scroll | fixed | local

示例

body {
  -webkit-mask-image: url('images/mask.png');
  -webkit-mask-attachment: fixed;
}

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes)
未实现 24.0		 未实现 未实现 未实现 4.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 未实现 未实现 未实现 3.2

另见