HTML/CSS十六进制中的背景图像解决方案 我在找什么？

我期待着使用一个图像背景为每个不同的六边形，在一个六边形网格与HTML和CSS的一面

我以前试过什么？ 我以前做过hex，使用photoshop和一个混乱的SASS循环为网格本身生成绝对单元，这使得响应性很难实现

为什么我不想使用相同的网格？

• 使用

  photoshop

  和

  SVG

  创建新的十六进制单元格需要时间
• 很难让它保持平稳响应
• 这似乎是一个混乱的解决方案

到目前为止我做了什么？ 今天，我期待使用以下十六进制：

代码笔示例，

CSS

@import "compass/css3";

$hex-size: 6em; // Only change size here. Best used with sizes from 5em - 10em.

/* ----------------------------------------- */
.container {
  width: 1000px; 
  line-height: 1.3;
}
ol.even {
  position: relative;
  left: ($hex-size / 1.1);
}
ol.odd {
  position: relative;
  margin-top: -6.5%;
  margin-bottom: -6.5%;
}
.hex {
  position: relative;
  margin: 1em auto;
  width: $hex-size; height: ($hex-size * 1.7);
  border-radius: 1em/.5em;
  background: #ccc;
  transform: rotate(-90deg);
  display: inline-block;
  margin-right: ($hex-size / 1.30);
  transition: all 150ms ease-in-out;
}
.hex:before, .hex:after {
  position: absolute;
  width: inherit; height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}
.hex:before {
  transform: rotate(60deg);
}
.hex:after {
  transform: rotate(-60deg);
}
.hex:hover {
  background: #F58787;
  cursor: pointer;
}

HTML

<div class="container">
  <ol class="even">
    <li class='hex'></li>
    <li class='hex'></li>
  </ol>  
  <ol class="odd">
    <li class='hex'></li>
    <li class='hex'></li>
    <li class='hex'></li>
  </ol>
  <ol class="even">
    <li class='hex'></li>
    <li class='hex'></li>
  </ol>  
</div>

• 尝试了

  背景附件

  ，在

  上.hex

  ，

  上.hex:after

  ，

  上.hex:before

• 尝试了用于bg的独特绝对

有什么想法吗？ 关于如何实现这一目标，有什么想法吗

---

谢谢。

添加了一个名为“test”的小类

<li class='hex test'></li>

---

它成功了。

你所说的“我需要使用图像背景作为我想要实现的十六进制网格”是什么意思。你想让每个六边形都有自己独特的背景还是所有六边形后面都有一个背景？我想为每个不同的六边形使用一个图像背景。你可以尝试使用类似于：document.getElementById（'add_an_id_here'）的方法来访问每个元素吗？下一步？然后添加一个特定的背景each@DevMoutarde谢谢你的意见，我可以试试。我会更新的，看起来不会有太多可能的解决方案，我正在寻找这样的东西，只是使用背景位置属性定位图像。

.hex.test {
  background-image: url("http://www.shunvmall.com/data/out/193/47864981-random-image.gif");
}