谷歌地图半径角答案

【问题标题】：Google Map radius corner谷歌地图半径角
【发布时间】：2013-09-17 03:59:27
【问题描述】：

滚动页面时webkit-mask-image 掩码会移动

body{
    height:1500px;
}

#wrapper {
    margin-top:250px;
    width: 300px; 
    height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

#map1 { 
    width: 300px; 
    height: 300px;

}

如何使 webkit-mask-image 静态化？谢谢

【问题讨论】：

你有想过这个吗？
复制：stackoverflow.com/questions/18792402/css-webkit-mask-image
在这里查看我的答案stackoverflow.com/a/18836164/1477388

标签： css google-maps-api-3

【解决方案1】：

据我了解，您不想在滚动（静态）上移动 Google 地图。

在CSS中称为fixed定位。

position: fixed

查看JSFiddle

【讨论】：

提供的 JsFiddle 与问题原件相同。
@Bart 哎呀。忘记更新它。检查此jsfiddle.net/DZTvR/1 感谢您的指点。
谢谢！但是如果页面上也显示了一些元素，则固定位置不是解决方案

【解决方案2】：

用图像文件 url 替换您的数据

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

【讨论】：