HTML5/CSS3 - 自定义形状Div,里面有谷歌地图
Ric*_*ani 16 html javascript jquery html5 css3
我需要制作一个自定义形状div,其中包含"谷歌地图"地图.自定义边框很好,我可以使用png来处理它,但是形状本身,我只有一些关于如何做的理论,但实际上没什么.但我认为有一种方法可以使用html5 canvas在div上创建自定义形状并在css中使用溢出:隐藏以隐藏div中的内容.
现在我有以下结构:
<html>
<body>
<div class="Orange_Background"></div>
<div class="FX_Lines_over_background"></div>
<div class="GoogleMaps_Container"></div>
</body>
</html>
所以你可以这样我不能使用背景作为png来只显示地图,因为我需要地图可以点击.
这是我所说的图像.
如果有人能帮助我,我将不胜感激!
谢谢你们.
PS:它也可以用jquery!(如果有人知道这样做的插件.)
您需要创建一个包含4个不同图层的框架,顶部/右侧/左侧/底部,并使用透明PNG图像应用比地图本身更高的z-index背景图像.位置需要绝对或固定在这些层上.
如下所示,4个图像是黑色突出显示的区域,它们需要单独切片,然后您可以将它们放置在地图图层上.这使中间区域保持打开状态,没有任何重叠层,因此地图仍然可用:
You can keep the entire orange background behind the maps layer, it won't matter because you'll be overlapping it first with the map, then with the 4 frame layers which if sliced properly and positioned properly would just overlap the background image. The entire background image would obviously be the full image, without any maps on it, but all orange with your stripes and gradient. Quite a task if you asked me, time consuming, but is possible.
NOTE: The transparent areas are only the white spaces you see in the black highlights, the rest would obviously be your image.
RE: Zee Tee 的回答：如果你确实走这条路，你可以为包含图像的 div 设置pointer-events: none （在你的 css 中）。这会将所有鼠标事件发送到其下方的图层。抱歉，我还没有评论答案的特权：D
如果您不关心 IE(6-8) 支持，那么您可以使用 CSS 3D 变换直接在地图图层上执行此操作。但是地图看起来会倾斜，如果这就是您想要的效果，如果不是的话，以前的答案仍然是最好的方法
另一种解决方案是使用掩模图像。抱歉，浏览器支持对此很糟糕，但如果你有一个很好的后备，直到他们赶上，你应该没问题
https://developer.mozilla.org/en/CSS/-webkit-mask-image