谷歌地图半径角

Question

滚动页面时，webkit-mask-image蒙版会移动

jsFiddle Sample

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保持静态？感谢

Answer 1

根据我的理解，您不希望在滚动（静态）上移动Google地图。

在CSS中，它被称为 fixed定位。

position: fixed

选中此JSFiddle

Answer 2

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

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