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

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

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

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

【问题讨论】:

  • 如果您不使用背景图像但内联 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标签。
  • 但是我有背景图片
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-11-24
  • 1970-01-01
  • 2010-10-15
  • 2014-05-25
  • 1970-01-01
相关资源
最近更新 更多