非标准
该特性是非标准的,请尽量不要在生产环境中使用它!
如果使用了 -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 type | discrete |
语法
可用的值
- scroll
- 使用
scroll
时, 蒙版在视口中同包含它的块一起滚动。 - fixed
- 使用
fixed
时, 蒙版不会同包含它的元素一起滚动,而是在视口中固定不动。
使用语法
示例
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 |