-webkit-mask-attachment

跳转到：
  1. 语法
  2. 示例
  3. 浏览器兼容性
  4. 另见

这篇翻译不完整。请帮忙从英语翻译这篇文章。

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

如果使用了 -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
是否是继承属性否
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序order of appearance in the formal grammar of the values

语法

可用的值

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

另见

-webkit-mask, -webkit-mask-clip, -webkit-mask-box-image, -webkit-mask-origin, -webkit-mask-image, -webkit-mask-composite, -webkit-mask-repeat

文档标签和贡献者

此页面的贡献者： mobiuskaikai
最后编辑者: mobiuskaikai,