HTML5/CSS3 - 自定义形状 Div 内含谷歌地图

Question

我不接受 OpenAI 或任何其他数据训练类型的 AI 使用我的知识

Answer 1

回复：Zee Tee 的回答：如果你确实走这条路，你可以为包含图像的 div 设置指针事件：无（在你的 css 中）。这会将所有鼠标事件发送到其下方的图层。抱歉，我还没有评论答案的特权：D

如果您不关心 IE(6-8) 支持，那么您可以使用 CSS 3D 变换直接在地图图层上执行此操作。但是地图看起来会倾斜，如果这就是你想要的效果，如果不是的话，以前的答案仍然是最好的方法

另一种解决方案是使用掩模图像。抱歉，浏览器支持对此很糟糕，但如果你有一个很好的后备，直到他们赶上，你应该没问题

https://developer.mozilla.org/en/CSS/-webkit-mask-image

Answer 2

您需要创建一个具有 4 个不同图层（上/右/左/下）的框架，并使用比地图本身透明的 PNG 图像应用更高的 z 索引、背景图像。这些层上的位置需要是绝对的或固定的。

如下所示，这 4 个图像是黑色突出显示的区域，需要将它们单独切片，然后您可以将它们放置在地图图层上。这使中间区域保持开放，没有任何重叠层，因此地图仍然有效：

您可以将整个橙色背景保留在地图图层后面，这并不重要，因为您将首先将其与地图重叠，然后与 4 个帧图层重叠，如果正确切片并正确定位，它们只会与背景图像重叠。整个背景图像显然是完整的图像，上面没有任何贴图，但全是橙色，带有条纹和渐变。如果你问我的话，这是一项相当大的任务，耗时，但这是可能的。

注意：透明区域只是您在黑色高光中看到的白色空间，其余部分显然是您的图像。