您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!
非标准
该特性是非标准的,请尽量不要在生产环境中使用它!
如果使用了 -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 type | discrete |
正规顺序 | order of appearance in the formal grammar of the values |
语法
可用的值
- scroll
- 使用
scroll
时, 蒙版在视口中同包含它的块一起滚动。 - fixed
- 使用
fixed
时, 蒙版不会同包含它的元素一起滚动,而是在视口中固定不动。
使用语法
<attachment>#
示例
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