具有背景圖像的DIV的絕對位置

我打算在背景圖像上放置一些DIV，但似乎效果不好。當屏幕尺寸改變時，DIV的位置會改變。媒體查詢不是解決方案。任何幫助？具有背景圖像的DIV的絕對位置

HTML

<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')"> 
    <div class="cities Delhi"></div> 
    <div class="cities Bangalore"></div> 
</div>

CSS：

.div-bg { 
    height: 85vh; 
    min-height: 500px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    position: relative; 
} 
.cities { 
    border: 1px solid red; 
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    background-color: red; 
} 
.cities.Delhi { 
    position: absolute; 
    top: 150px; 
    left: 175px; 
} 
.cities.Bangalore { 
    position: absolute; 
    top: 250px; 
    left: 275px; 
}

JSFIDDLE DEMO

來源

2017-05-08 Elaine Byene

.cities CSS左側位置應該是百分比。 –

這可能比它看起來更復雜一些，這取決於你希望如何擴展，檢查這個答案（第二部分有一個CSS版本）：http://stackoverflow.com/a/36097410/2827823 – LGSon

這是更好爲您的位置使用％而不是px，因此它是有響應的。而這些點應該與img而不是'absolute'相對' –

如果一個固定的寬度設置爲容器

.div-bg{ width:700px;}

將解決您的問題

來源

2017-05-08 13:17:07

紅點的位置不變，div-bg內的背景圖像的位置正在改變。在調整大小的同時檢查該div，你會看到。防止發生這種情況的一種方法是給div一個固定的寬度和高度。檢查出更新fiddle。

width: 500px;

來源

2017-05-08 13:18:45 sn3ll

.div-bg{ 
    width:555px; 
}

這個CSS添加到您的代碼。

來源

2017-05-08 13:28:32

對於圖像尺寸，使用vmin單位，將會優雅地適應視口尺寸。

百分比設定，城市的位置

.div-bg { 
 
    height: 100vmin; 
 
    width: 100vmin; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    position: relative; 
 
} 
 
.cities { 
 
    border: 1px solid red; 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 50%; 
 
    background-color: red; 
 
} 
 
.cities.Delhi { 
 
    position: absolute; 
 
    top: 27%; 
 
    left: 30%; 
 
} 
 
.cities.Bangalore { 
 
    position: absolute; 
 
    top: 85%; 
 
    left: 33%; 
 
}

<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')"> 
 
    <div class="cities Delhi"></div> 
 
    <div class="cities Bangalore"></div> 
 
</div>

來源

2017-05-08 16:08:05 vals

具有背景圖像的DIV的絕對位置

回答

相關問題