解决此背景图像问题的最佳方法是什么？

Question

我的目标：

所以我正在制作一个网页，其中有一张美国地图作为 "background image"，在该地图的顶部我有大约 10 个指向特定位置的标记。标记不是图片的一部分，只是我用绝对定位和顶部和左侧添加了百分比。

问题：

当我缩小页面或上下滚动时，我用绝对定位设置的标记开始移出它们应该在的位置，因为背景图像越来越小，无法显示100%.

问题：

如何使用地图上的标记在 window 缩小时不动的地方实现我想要的效果？

现在我只知道 1 个解决方案，这个解决方案可能需要很长时间。我在想的是，与其用百分比在地图上定位我想要的标记，不如用像素来定位，然后使用大量媒体查询并继续调整它。此解决方案不仅需要非常长的时间，而且似乎也不是解决此问题的正确方法。

HTML:

<div class="container main-content"><!--the map background image is set here-->
<div class="row relative">
    <div class="eq-content-wrap">
        <div class="eq-content">
            <div class="marker"></div> <!--the marker that is positioned absolute-->
        </div>
    </div>
  </div>

CSS:

html, body{
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            background: #000;
}
body{ overflow: hidden; }

.main-content{
                background: url('assets/img/map1.jpg') no-repeat top center;
                background-size: contain;
                height: 100% !important;
                width: 100% !important;
}
.eq-content-wrap{
                position: absolute;
                width: 500px !important;
                top: 22%;
                left: 40%;
}

.marker{
                        height: 40px;
                        width: 40px;
                        border-radius: 100%;
                        background-color: red;
                        position: absolute;
                        top: 50%;
                        margin-top: -20px;
}

Answer 1

问题是您的背景图片大小设置为 100%：background-size: 100%。这意味着当浏览器尝试缩放内容时，背景不会随之缩放（它保持 100%）。

最好的办法是完全删除 background-size 属性。这允许标记在页面缩放时保持在原位，但是，您将不会获得当前拥有的全屏背景效果（除非您有更大的图像）。

背景仍然会移动，但是，一旦浏览器 window 宽度小于图像的宽度。这是因为您将 background-position 设置为顶部中心。一旦浏览器 window 宽度小于图像宽度，中心就是导致它移动的原因。将中心更改为左侧，它将解决该问题。您还需要将标记的容器设置为基于左侧，以便在更宽的屏幕上工作。基本上，删除所有中心属性会有所帮助，但屏幕不会在宽屏幕上居中。

Answer 2

尝试用 css :before 伪元素替换 .marker ；使用 calc()

设置百分比单位值

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      background: #000;
    }
    body {
      overflow: hidden;
    }
    .main-content {
      background: url(http://lorempixel.com/400/300) no-repeat top center;
      background-size: contain;
      height: 100% !important;
      width: 100% !important;
    }
    .eq-content-wrap {
      position: absolute;
      width: 500px !important;
      top: 22%;
      left: 40%;
    }
    .main-content:before {
      content: " ";
      height: calc(12.5%);
      width: calc(5%);
      border-radius: 100%;
      background-color: red;
      position: absolute;
      top: calc(50%);
      left: calc(50%);
      margin-top: calc(1%);
    }

<div class="container main-content">
  <!--the map background image is set here-->
  <div class="row relative">
    <div class="eq-content-wrap">
      <div class="eq-content">
        <div class="marker"></div>
        <!--the marker that is positioned absolute-->
      </div>
    </div>
  </div>

jsfiddle http://jsfiddle.net/o79rpawc/

解决此背景图像问题的最佳方法是什么？

What is the best way to approach this background image issue?

html

javascript

css

background-image

absolute