本文介绍了Google地图半径角的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在滚动页面
的
body {
height:1500px;
}
#wrapper {
margin-top:250px;
width:300px;
height:300px;
border-radius:100px;
overflow:hidden;
position:absolute; / *这打破了溢出:隐藏在Chrome /歌剧* /
-webkit-掩模图像:网址(数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA + oJAAAAAElFTkSuQmCC); / * this fixes the overflow:hidden in Chrome / Opera * /
}
#map1 {
width:300px;
height:300px;
}
如何使WebKit的掩模图像静态的?谢谢
解决方案
有一个图像文件网址
<$ P替换数据$ p>
-webkit-掩模图像:网址(数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA + oJAAAAAElFTkSuQmCC);
The webkit-mask-image
mask moves when you scrolling the page
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;
}
How to make the webkit-mask-image static? Thanks
解决方案
Replace your data with an image-file url
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
这篇关于Google地图半径角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!