HTML5 / CSS3 - 自定义形状Div，里面有谷歌地图
[英]HTML5/CSS3 - Custom Shape Div with google maps inside
问题描述
I need to make a custom shape div holding a "google maps" map. 
我需要制作一个自定义形状div，其中包含“谷歌地图”地图。 The custom border it's fine, I can handle it using a png, but the shape itself, I have only some theories of how to do it, but nothing in practice. 自定义边框很好，我可以使用png来处理它，但是形状本身，我只有一些关于如何做的理论，但实际上没什么。 But I think there is a way to do it using html5 canvas to make the custom shape on the div and use in css a overflow:hidden to hide what goes out of the div. 但我认为有一种方法可以使用html5 canvas在div上创建自定义形状并在css中使用溢出：隐藏以隐藏div中的内容。
right now I have the following structure: 现在我有以下结构：
<html>
<body>
<div class="Orange_Background"></div>
<div class="FX_Lines_over_background"></div>
<div class="GoogleMaps_Container"></div>
</body>
</html>
So as you can se I can't use the background as a png to only show the map, and because I need the map to be clickable. 因此，您可以使用背景作为png来仅显示地图，因为我需要地图可以点击。
Here is a image of what I was saying. 这是我所说的图像。
If anyone can help me, I'll be grateful !! 如果有人能帮助我，我将不胜感激！
Thank you all. 谢谢你们。
PS: It can be with jquery too ! PS：它也可以用jquery！ (if someone knows a plugin that do it.) （如果有人知道这样做的插件。）
2 个解决方案
解决方案1
5 2012-07-04 21:09:08
You would need to create a frame with 4 different layers, top/right/left/bottom, and apply a higher z-index, background-image using a transparent PNG image than the map itself. 您需要创建一个包含4个不同图层的框架，顶部/右侧/左侧/底部，并使用透明PNG图像应用比地图本身更高的z-index背景图像。 Position would need to be absolute or fixed on those layers. 位置需要绝对或固定在这些层上。
As you can see below, the 4 images are the black highlighted areas, and they would need to be individually sliced, then you can position them over the map layer. 如下所示，4个图像是黑色突出显示的区域，它们需要单独切片，然后您可以将它们放置在地图图层上。 This keeps the middle area open without any overlapping layers so the map is still functional: 这使中间区域保持打开状态，没有任何重叠层，因此地图仍然可用：
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. 您可以将整个橙色背景保留在地图图层后面，这无关紧要，因为您将首先将其与地图重叠，然后使用4个框架图层，如果正确切割并正确定位将与背景图像重叠。 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. 注意：透明区域只是您在黑色高光中看到的白色空间，其余部分显然是您的图像。
解决方案2
4 已采纳 2012-07-04 21:33:32
RE: Zee Tee's answer: If you do go this route, you can set pointer-events: none (in your css) for the div containing the images. RE： Zee Tee的回答：如果你选择这条路线，你可以为包含图像的div设置指针事件：无（在你的css中）。 this will send all mouse events to the layer below it. 这会将所有鼠标事件发送到它下面的图层。 Sorry, I don't have the privilege to comment on answers yet :D 对不起，我还没有权利对答案发表评论：D
If you don't care about IE(6-8) support, then you can use CSS 3D transforms to do this directly on the map layer. 如果您不关心IE（6-8）支持，那么您可以使用CSS 3D变换直接在地图图层上执行此操作。 But the map will look skewed, if that's the effect you are after, if not previous answer is still the best approach 但是地图会看起来有些偏差，如果这是你所追求的效果，如果不是以前的答案仍然是最好的方法
Another solution is to use the mask image. 另一种解决方案是使用掩模图像。 sorry browser support sucks for this, but if you have a nice fallback until they catch up, you should be alright 对不起浏览器的支持很糟糕，但如果你有一个很好的后备，直到他们赶上，你应该没事
https://developer.mozilla.org/en/CSS/-webkit-mask-image https://developer.mozilla.org/en/CSS/-webkit-mask-image
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.