-webkit-mask-attachment
非标准
该特性是非标准的，请尽量不要在生产环境中使用它！
如果使用了 -webkit-mask-image (en-US), -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! (en-US)
| 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 |