如何创建具有可变高度的全宽背景图像，具体取决于内容？

Question

我只是想在100％宽度的网页上放置一个背景图片，所以它会缩放以适应视口，这可以通过使用以下样式在body标签后面紧跟一个图像来正常工作：

img#background {
min-width: 800px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

这很好用，唯一的问题是，如果内容的高度小于图像的高度，我希望图像在底部切断，就像背景图像一样。因此，如果页面内容仅为400px高，则背景图像应仅为400px（即使缩放时，整个高度应该大于此值）。我不确定如何使用纯CSS（没有javascript）这样做，所以如果有人能指出我正确的方向，我将非常感激？

Answer 1

尝试使用以下CSS属性放置<div>：

overflow: hidden;
left: 0;
top: 0;
position: absolute;
z-index: -9999;

Answer 2

您可以将其添加到您的内容中，并将内容设置为overflow: hidden。