div跟隨背景圖像

我的問題是，我正在製作一個響應的Web應用程序，我需要一個背景圖像，我想在div中的某個點跟隨/粘貼到背景圖像。對於我來說，無論背景是縮放還是隻是削減兩側，都無關緊要。div跟隨背景圖像

我已經做了小提琴：http://jsfiddle.net/2bhk5n5y/6/

HTML：

<div id="map"> 

<div id="point1" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div> 
<div id="point2" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div> 
<div id="point3" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div> 

</div>

CSS：

body { 
background-color:#000000;} 

#map { 
width:100%; 
height:600px; 
background: url('https://treasurehuntdesign.com/wp-content/uploads/2010/09/how-to-make-a-treasure-map-9.jpg') no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover;} 

#point1 { 
left: 20%; 
top: 10%;} 

#point2 { 
left: 400px; 
top: 150px;} 

#point3 { 
left: 500px; 
top: 400px;} 

.point-location { 
position: fixed; 
z-index: 2; 
transform: rotateX(60deg); 
-ms-transform: rotateX(60deg); 
-moz-transform: rotateX(60deg); 
-webkit-transform: rotateX(60deg);} 

.point-dot{ 
width: 13px; 
height: 13px; 
border: 2px solid #000000; 
border-radius: 30px; 
background: #000000; 
position: fixed; 
top: 21px; 
left: 21px;} 

.point-pulse{ 
border: 5px solid #000; 
background: transparent; 
border-radius: 60px; 
height: 50px; 
width: 50px; 
transform: scale(0.5); 
animation: pulse 10s ease-out; 
animation-iteration-count: infinite; 
-ms-transform: scale(0.5); 
-ms-animation: pulse 10s ease-out; 
-ms-animation-iteration-count: infinite; 
-moz-transform: scale(0.5); 
-moz-animation: pulse 10s ease-out; 
-moz-animation-iteration-count: infinite; 
-webkit-transform: scale(0.5); 
-webkit-animation: pulse 10s ease-out; 
-webkit-animation-iteration-count: infinite;} 

@keyframes pulse { 
0% { 
    transform: scale(0); 
    opacity: 0.8; 
} 
10% { 
    transform: scale(2); 
    opacity: 0; 
    border: 5px solid #FFFFFF; 
} 
100% { 
    transform: scale(2); 
    opacity: 0; 
}} 
@-ms-keyframes pulse { 
0% { 
    -ms-transform: scale(0); 
    opacity: 0.8; 
} 
10% { 
    -ms-transform: scale(2); 
    opacity: 0; 
    border: 5px solid #FFFFFF; 
} 
100% { 
    -ms-transform: scale(2); 
    opacity: 0; 
}} 

@-moz-keyframes pulse { 
0% { 
    -moz-transform: scale(0); 
    opacity: 0.8; 
} 
10% { 
    -moz-transform: scale(2); 
    opacity: 0; 
    border: 5px solid #FFFFFF; 
} 
100% { 
    -moz-transform: scale(2); 
    opacity: 0; 
}} 

@-webkit-keyframes pulse { 
0% { 
    -webkit-transform: scale(0); 
    opacity: 0.8; 
} 
10% { 
    -webkit-transform: scale(2); 
    opacity: 0; 
    border: 5px solid #2b99df; 
} 
100% { 
    -webkit-transform: scale(2); 
    opacity: 0; 
}}

希望我的問題是非常明顯的，否則就問。

來源

2015-10-19 Heidi Mikkelsen

正如你所說的那樣，不管它是否被切斷，你所要做的就是確保這些點相對於地圖中心的位置，因爲你正在居中地圖。

.point-location 
{ 
    position: absolute; 
    top:50%; 
    left:50%; 
}

http://jsfiddle.net/2bhk5n5y/7/

來源

2015-10-19 08:59:46

對不起，這麼長時間來回答。我發現我有另一個問題，我使用bootstrap，因爲它有點不同，我做了一個檢查： http://jsfiddle.net/2bhk5n5y/8/ 任何想法如何解決這個問題？它只是一個垂直問題 –

我想你的意思是滾動時的問題，只是從你的背景中刪除固定的屬性，所以它也滾動以及 http://jsfiddle.net/2bhk5n5y/9/ –

確定它的工作原理。謝謝！ –

div跟隨背景圖像

回答

相關問題