Question

我的目标：

所以我正在创建一个带有美国地图的网页作为＆＃34;背景图像＆＃34;在该地图的顶部，我有大约10个指向特定位置的标记。标记不是图片的一部分，只是我用绝对定位添加它们，顶部和左边用百分比。

问题：

当我向下缩小页面或向上和向下滚动时，我用绝对定位设置的标记开始移出现场，因为背景图像越来越小，它显示为100％

问题：

我如何通过地图上的标记来实现我想要的效果，因为在缩小窗口时它们会不会移动？

现在我只知道一个解决方案，此解决方案可能需要非常长的时间。我在想的不是将我想要的标记放在地图上，而是用百分比来设置像素，然后使用TON的媒体查询并继续调整它。这个解决方案不仅需要花费很长时间，而且似乎也不是正确的解决方法。

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属性。这样，当页面缩放时，标记就会保留在原位，但是，您将无法获得当前具有的全屏背景效果（除非您有更大的图像）。

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

Answer 2

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

设置百分比单位值

＆＃13;

    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%);
    }

＆＃13;

<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>

＆＃13;

jsfiddle http://jsfiddle.net/o79rpawc/

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

2 个答案: