將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元素位置鏈接到圖像

回答

相關問題