Question

我正在尝试在全屏背景上显示多个div。在调整浏览器大小时，div也必须移动。我也希望div调整大小，以使它们保持在背景图像的同一位置。

我在Stackoverflow上找到了一个很好的解决方案，但是图像不是全屏背景。我已尝试对其进行调整，但它似乎没有用。谁可以帮助我？

.div-bg {
    height: 100vmin;
    width: 100vmin;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: relative;
}
.cities {
    border: 1px solid red;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
}
.cities.Delhi {
    position: absolute;
    top: 27%;
    left: 30%;
}
.cities.Bangalore {
    position: absolute;
    top: 85%;
    left: 33%;
}

<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')">
  <div class="cities Delhi"></div>
  <div class="cities Bangalore"></div>
</div>

Answer 1

只需将.cities position从absolute更改为fixed ...而不是使用vmin作为宽度和高度...使用{{1 }}或px

rem

.div-bg {
  background-image: url('https://image.ibb.co/f1qio5/insights_indiamap.jpg');
  height: 30rem;
  width: 30rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  position: relative;
  background-size: auto;
}

.cities {
  position: fixed;
  border: 1px solid red;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}

.cities.Delhi {
  position: absolute;
  top: 27%;
  left: 30%;
}

.cities.Bangalore {
  position: absolute;
  top: 85%;
  left: 33%;
}

具有绝对div的全屏背景

1 个答案: