具有可悬停效果的背景图像图案答案

【问题标题】：Background image pattern with hoverable effect具有可悬停效果的背景图像图案
【发布时间】：2020-01-23 09:47:46
【问题描述】：

您对如何制作这种图案有任何想法吗？我只有这样的背景图片，我希望 4 个浅色六边形作为链接。

我已经尝试过使用 svg，但我认为更新它的响应性会花费我更多的时间。

我还搜索了其他方法（创建蜂窝模式），但我似乎无法为此找到最佳解决方案。

【问题讨论】：

html.com/images/how-to-make-an-image-map
如果您不使用背景图像但内联 SVG 会更容易，因为它可以是交互式的。
@RobertLongson 我认为如果我从头开始制作这些模式会很耗时。
有potrace等工具可以将光栅图像转换为SVG。
这对于 背景图片 是不可能的，因为它们不是元素，因此不受 CSS 或悬停选择的影响。 bg 图片是一种样式，而不是元素。

标签： html css svg design-patterns clip-path

【解决方案1】：

您可以创建一个 HTML 图像映射，并如下定义六边形的区域。

^{注意：我只输入了右上角六边形的坐标。其他的将遵循相同的模式。}

<img src="https://i.stack.imgur.com/zGR9G.jpg" width="1024" height="527" usemap="#map">

<map name="map">
  <area href="https://stackoverflow.com" shape="poly"
        coords="834,146, 888,146, 914,192, 888,236 834,236, 810,192">
</map>

【讨论】：

请问您是如何获得具体坐标的？
刚刚在图像编辑器中打开图像，然后查找它们。这些是六边形的六个角。
谢谢。但它似乎不适用于具有背景图像的
。
需要一个img标签。
但是我有背景图片