Question

我的问题是我正在制作一个自适应网页应用，而且我需要一张背景图片，我希望在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;
}}

希望我的问题很清楚，否则就问。

Answer 1

正如你所说的那样，无论你是否切断了所有你需要做的就是确保点相对于地图的中心位置，因为你是地图的中心。

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

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

跟随背景图像的div

1 个答案: