Question

我想让HTML元素在背景图像上“固定”位置
的实施例

我想创建一个PHP / SQL策略/管理游戏，其中用户界面是驾驶舱，火箭驾驶舱（因为游戏发生在太空）。因此背景图像将类似于：

左侧的按钮控制火箭的目的地
右侧按钮控制玩家可以采取的行动
挡风玻璃位于大多数HTML显示的中间

我希望HTML元素（主要是div）准确放置在它们应该的位置（显示火箭速度的div必须正好在我图片底部绘制的速度表下）。

问题在于，无论我使用top: 300px;还是top: 15%;，当屏幕调整大小时，每个元素都会移出原来的位置，从而导致翻转。
你们有什么想法？

注意：背景图片需要响应，让我们说它总是填充视口

Answer 1

元素位置＆＃39;固定＆＃39;将相对于浏览器窗口。

你可能想要使用位置绝对的＆＃39;和“亲戚”。

例如：

＆＃13;

.container {
  position: relative;
  width: 530px;
  height: 207px;
}
.score {
  position: absolute;
  top: 8px;
  right: 0px;
  width: 100px;
  height: 35px;
}
.btn-1 {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 50px;
  height: 35px;
  background-color: red;
}
.btn-2 {
  position: absolute;
  bottom: 10px;
  left: 70px;
  width: 50px;
  height: 35px;
  background-color: blue;
}

＆＃13;

<div class="container">
  <img src="https://opengameart.org/sites/default/files/background0.png" width="530" height="207">
  <div class="score">Score : 1,200</div>
  <div class="btn-1"></div>
  <div class="btn-2"></div>
</div>

＆＃13;

您应该为位置＆＃39;绝对＆＃39;

指定元素的大小（宽度，高度）

参考：https://www.w3schools.com/cssref/pr_class_position.asp

将HTML元素位置链接到图像

1 个答案: