如何将元素绑定到背景图像(响应式)？

Question

是否可以将(HTML)元素绑定到父元素的背景图像？在下面的示例代码中，我希望(悬停)元素始终留在块上，即使窗口调整为小(移动)大小的屏幕也是如此。

​

.steps {
  background: url(https://i.gyazo.com/c027c7cefa8f66fb10135547ac650d24.png) center no-repeat;
  background-size: contain;
  height: 95px;
}
.steps ul {
  /* margin-top: 0; */
  /* margin-left: -246px; */
  margin-left: -286px;
  left: 50%;
  top: 0%;
  margin-top: 13px;
  position: absolute;
}
.steps ul li {
  display: inline-block;
  margin: 0 2px;
}
.steps ul li a {
  display: block;
  height: 82px;
  width: 116px;
  /*margin-bottom: 22px;*/
  text-indent: -9999em;
}
.steps ul li a:hover {
  background: rgba(255, 255, 255, 0.25);
}

<div class="steps">
  <ul class="list-unstyled">
    <li>
      <a href="#">Block 1</a>
    </li>
    <li>
      <a href="#">Block 2</a>
    </li>
    <li>
      <a href="#">Block 3</a>
    </li>
    <li>
      <a href="#">Block 4</a>
    </li>
  </ul>
</div>

​

JSFiddle

现在出现的问题是，这些块不会保持在队列中。我想在这周围放置一个父容器元素，但这将导致图像不再居中。

有人能在这方面给我一些建议吗？

Answer 1

我注意到你在使用：

位置:绝对；

绝对定位不是一种适合响应式设计的技术。对于响应式设计，通常会使用相对大小单位，如ems，并使用相对定位技术而不是绝对定位技术。我想说，你需要重新考虑你的设计技巧，使用相对大小和相对位置。