CSS：-webkit-mask-image

Question

我正在使用CSS属性

-webkit-mask-image

在图像上应用蒙版。但是，在chrome中，当您从页面上滚动图像时，蒙版会移动。

你如何防止面具移动？或者它是渲染工件？

JSFiddle：http://jsfiddle.net/DZTvR/（向下滚动框架中的地图）。

Answer 1

你必须调整.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);

http://jsfiddle.net/DZTvR/13/

对于IE＆lt; = 8。

，这也应该优雅地降级

修改

这是一个更好的答案：https://stackoverflow.com/a/4579617/1477388

示例：http://search.missouristate.edu/map/mobile/examples/corners.htm

Answer 2

用图像文件网址替换您的数据

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

关于您的情况，2013年8月26日mihaip@chromium.org报告了关于铬的问题：http://code.google.com/p/chromium/issues/detail?id=279319以及关于类似主题的http://code.google.com/p/chromium/issues/detail?id=99052

有关信息的补充：-webkit-mask-attachment: No more supported in Chrome 24 and later. Supported in Safari 4.0。

Answer 3

如果我正确理解你的问题......你应该能够使用SVG剪辑路径，然后根据自己的喜好定位你的包装div。

<强> Working Example

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>

在Firefox和Chrome中测试并使用。