将HTML元素位置链接到图像

我想使HTML元素的位置“固定”在背景图像上。

例

我想创建一个PHP/SQL的策略/管理游戏，用户界面是驾驶舱，火箭驾驶舱（因为游戏发生在空间的地方）。因此，研究背景图像会是这样的：左边将HTML元素位置链接到图像

按钮来控制火箭的目标上CONTROLE什么样的行动，玩家可以做
的权利，并在中间的挡风玻璃大多数HTML
按钮显示

我希望HTML元素（主要是div）被准确放置在他们应该在的位置（显示火箭速度的div必须完全位于绘制在我的图片底部的速度计下）。

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

你们认为什么？

注：背景图片需要响应，让我们在这里说，它总是充满视

来源

2017-04-19 GuiguiSensei

我认为你需要显示你的代码，以便我们有一个工作示例 – Swellar

固定是相对于视口。您需要修复主容器，然后设置与此相关的嵌入元素。你能发布你的代码吗？ – mrkd1991

我还没有任何例子，但在我的脑海里很清楚。假设您在屏幕底部有一个速度计的图片。我需要做什么，因此，无论窗口的大小如何，我的包含速度值的HTML div始终停留在速度计内部？ – GuiguiSensei

元素位置“固定”将相对于浏览器窗口。

您可能想要使用“绝对”和“相对”位置。

例如：

.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; 
 
}

<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>

你应该给元件的尺寸（宽，高）的位置 '绝对'

编号：https://www.w3schools.com/cssref/pr_class_position.asp

来源

2017-04-19 08:22:54 HeeMZa

谢谢你的回答。但是这不能响应：不管我调整窗口大小，你的容器都保持相同的大小。我想我应该在我的问题中添加我想要我的背景图片来填充视口...但是我仍然感谢您的时间HeeMZa :) – GuiguiSensei

您可以将像素（px）更改为位置或大小的百分比（％） – HeeMZa

正如我在第一篇文章中提到的，我已经尝试从（px）切换到（％），但是图像和html元素在调整窗口大小时不会以相同的方式移动。 – GuiguiSensei

将HTML元素位置链接到图像

回答

相关问题