CSS：-webkit-mask-image
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18792402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: -webkit-mask-image
提问by Andy Hin
I'm using the CSS property
我正在使用 CSS 属性
-webkit-mask-image
To apply a mask over an image. However, in chrome, the mask moves as you scroll the image off the page.
在图像上应用蒙版。但是，在 chrome 中，当您将图像从页面上滚动时，遮罩会移动。
How do you prevent the mask from moving? Or is it a rendering artifact?
如何防止口罩移动？还是渲染神器？
JSFiddle: http://jsfiddle.net/DZTvR/(Scroll down on the frame with the map in it).
JSFiddle：http: //jsfiddle.net/DZTvR/（向下滚动带有地图的框架）。
采纳答案by user1477388
You'll have to resize the .png but this seems to work for me:
您必须调整 .png 的大小，但这似乎对我有用：
-webkit-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
-o-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
-moz-mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
mask-image: url(http://s21.postimg.org/gfep7h1h3/trans_Test.png);
This should also degrade gracefully for IE <= 8.
对于 IE <= 8，这也应该优雅地降级。
Edit:
编辑：
This is a better answer: https://stackoverflow.com/a/4579617/1477388
这是一个更好的答案：https: //stackoverflow.com/a/4579617/1477388
Example: http://search.missouristate.edu/map/mobile/examples/corners.htm
示例：http: //search.missouristate.edu/map/mobile/examples/corners.htm
回答by Milche Patern
Replace your data with an image-file url
用图像文件 url 替换您的数据
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
About your situation, there is this issue on chromium reported by [email protected], Aug 26, 2013 : http://code.google.com/p/chromium/issues/detail?id=279319and this one about similar subject http://code.google.com/p/chromium/issues/detail?id=99052
关于您的情况，[email protected] 于 2013 年 8 月 26 日报告了这个关于铬的问题：http: //code.google.com/p/chromium/issues/detail?id=279319 和这个关于类似主题的问题 http://code.google.com/p/chromium/issues/detail?id=99052
For complement of info : -webkit-mask-attachment: No more supported in Chrome 24 and later. Supported in Safari 4.0.
有关信息的补充：-webkit-mask-attachment：Chrome 24 及更高版本不再支持。在 Safari 4.0 中受支持。
回答by apaul
If I'm understanding your question correctly... You should be able to use SVG clip-path and then position your wrapper div however you like.
如果我正确理解你的问题......你应该能够使用SVG剪辑路径，然后根据你的喜好定位你的包装器div。
body {
height: 1800px;
}
#wrapper {
position:absolute;
top:100px;
left:100px;
}
#map1 {
width: 251px;
height: 254px;
-webkit-clip-path: url(#clipping);
clip-path: url(#clipping);
}
svg {
height:0;
}
<div id="wrapper">
<div id="map1"></div>
</div>
<svg>
<defs>
<clipPath id="clipping">
<polygon points="100,10 40,180 190,60 10,60 160,180" />
</clipPath>
</defs>
</svg>
Tested and working in Firefox and Chrome.
在 Firefox 和 Chrome 中测试和工作。
