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），并使用相对定位技术而不是绝对技术。我想你需要重新考虑你的设计技巧，以使用相对大小和相对位置。

如何将元素绑定到背景图像（响应）？

1 个答案: