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

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