HTML / CSS Hex中的背景图像变通方法

Question

我在找什么？

我希望在每个不同的六边形上使用图像背景，在用HTML和CSS制作的六边形网格的一侧。

我之前尝试过什么？

我之前使用过photoshop和一个凌乱的SASS循环来制作网格本身的绝对单元格，好吧，它很难实现响应。

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

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

到目前为止我做了什么？

今天我期待使用以下十六进制：

Codepen示例， https://codepen.io/elbarto84/pen/wrcob/

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>

• 尝试background-attachment，.hex，.hex:after，.hex:before;
• 尝试了用于bg的独特绝对<div>;

有什么想法吗？

是否有任何关于如何实现的诀窍？

谢谢。

Answer 1

添加了一个名为'test'的小类

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

添加了背景链接

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

它有效。