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跟随背景图像

回答

相关问题