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

【问题标题】：Background Image Distorted when using cover and appending lots of images使用封面和附加大量图像时背景图像失真
【发布时间】：2018-02-25 07:21:00
【问题描述】：

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

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

有什么方法可以使图片保持与页面加载时相同的大小，并在图片下方有一个简单的背景色，以便在添加图片时覆盖页面的其余部分？

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

感谢您的宝贵时间。

【问题讨论】：

标签： css background-image cover

【解决方案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>

【讨论】：

视口尺寸正是我所需要的。当页面延伸到视口下方时，在正文上放置背景颜色以覆盖。感谢您的帮助，这解决了我的问题。