Question

我在为我正在撰写的网站调整背景图片时遇到一些困难。我想用一张大图来覆盖网站的背景。我正在使用css属性封面，当页面加载时它看起来很好。

我的问题是当点击一个按钮时，它会将10个图像附加到空div。当附加这些图像时，该div正在变得非常大并且改变页面大小，这导致图像重新加载以适应这种显着增加的页面大小。这导致图像看起来非常扭曲。

是否有任何方法可以保持图像与页面加载时的大小相同，并且在图像下方有一个简单的背景颜色，当图像被追加时会覆盖页面的其余部分？

我使用的是background-size：cover和background-repeat：no-repeat

感谢您的时间。

Answer 1

不是100％我找到了你，但你可以尝试两个div。

一个div将包含您的背景图片，并设置为height: 100vh;和width: 100vw;。这样可以确保图像始终与视口保持相同的大小，从而在添加内容时不会改变大小。

在这个div下，你可以使用另一个，并设置一个简单的颜色属性。

即，

＆＃13;

.bg-image {
  width: 100vw;
  height: 100vh;
  background-image: url(someurl);
  background-size: cover;
  background-repeat: none;
}

.bg {
  background-color: grey;
  height: 100%;
  width: 100%;
}

＆＃13;

<div class="bg">
  <div class="bg-image">
    <!-- Place where the images go -->
  </div>
</div>

＆＃13;

背景图像使用封面并附加大量图像时失真

1 个答案: