Question

我有一个有背景图片的容器。我还有几个div指向相对于背景的确切位置。我可以使用左上角属性来做到这一点。但问题是容器的宽度为60％，最小宽度为500px。调整浏览器窗口的大小会使div的位置变得混乱。

这是我的代码：

CSS

.container{
    width:60%;
    height:550px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-275px 0 0 -30%;
    min-width:500px;
    border: rgba(255,255,255,0.2) solid 1px;

}
.main-content{
    float:left;
    width:100%;
    height:100%;
    position:absolute;
    background:url(../img/map.png) no-repeat center center;
    background-size:90% auto;
    background-mi
}

.loc1-point{
    height:20px;
    width:20px;
    position:absolute;
    left:18.5%;
    top:14.5%;
    background-color:red;
    border-radius:50%;
}

HTML

<div class="container">
    <div class="main-content">
         <div class="loc1-point"></div>
    </div>
</div>

这是demo给你的想法。但是，在重新调整实际浏览器窗口的大小时，地图上的点会移动很多。我可以将图像添加为img元素，然后将点放在它上面，但我想要的只是在某些位置获得我的点并且在容器的所有大小中具有相同的外观。关于如何做到这一点的任何想法？

Answer 1

所以我会提出一个答案，让我们看看它是多么有说服力。

此FIDDLE具有以下内容：

特定大小的div。
地图的背景图片，其大小与div相同
第一个div中的第二个div（标记）
标记的位置按照％ - 右侧的Piazza del Popolo

HTML

<div class='firstdiv'>
<div class='seconddiv'></div>
</div>

CSS

.firstdiv {
    background: url(http://www.centralromehotels.net/map/rome_map.jpg);
    background-size: 500px 400px;
    width: 500px;
    height: 400px;
}
.seconddiv {
    width:            10px;
    height:           10px;
    background-color: red;
    position:         relative;
    top:              11%;
    left:             47%;
}

因此，关键是容器中的“固定”地图，并相对调整标记。

如何使div匹配背景的确切点？

1 个答案: