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

Question

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

我的问题是单击按钮时，它会将 10 张图像附加到空白 div。当附加这些图像时，div 变得非常大并改变页面大小，这导致图像重新加载以适应这个显着增加的页面大小。这导致图像看起来非常失真。

有什么方法可以使图像与页面加载时的大小保持一致，并在图像下方设置一个简单的背景颜色，以便在附加图像时覆盖页面的其余部分？

我正在使用背景大小：封面和背景重复：不重复

感谢您的宝贵时间。

Answer 1

不是 100% 我明白你的意思，但你可以尝试有两个 divs。

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

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

即

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

.bg {
  background-color: grey;
  height: 100%;
  width: 100%;
}

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

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

Background Image Distorted when using cover and appending lots of images

css

background-image

cover