11

我正在使用 CSS 属性

-webkit-mask-image

在图像上应用蒙版。但是，在 chrome 中，当您将图像滚动到页面外时，遮罩会移动。

如何防止面罩移动？或者它是一个渲染神器？

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

4

3 回答 3

11

您必须调整 .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 <= 8，这也应该优雅地降级。

在此处输入图像描述

编辑：

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

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

于 2013-09-16T19:52:03.010 回答
3

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

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

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

补充信息：-webkit-mask-attachment：Chrome 24 及更高版本不再支持。在 Safari 4.0 中受支持。

于 2013-09-16T19:58:39.693 回答
0

如果我正确理解了您的问题...您应该能够使用 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>

在 Firefox 和 Chrome 中测试和工作。

于 2013-09-22T08:58:31.993 回答