Google地图半径角 [英] Google Map radius corner

问题描述

在滚动页面

的 WebKit的面具图片面膜移动=http://jsfiddle.net/DZTvR/相对=nofollow>的jsfiddle样品

  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

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;

}

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地图半径角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！