如何根据内容创建具有可变高度的全宽背景图像？

Question

我只是想将背景图片放在一个宽度为 100% 的网页上，以便它可以缩放以适应视口，这可以通过使用以下样式在 body 标记之后立即放置一个图片来正常工作：

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

这很好用，唯一的问题是如果内容的高度小于图像的高度，我希望图像在底部被切断，就像背景图像一样。因此，如果页面内容只有 400 像素高，那么背景图像应该只有 400 像素（即使缩放时全高应该超过这个）。我不确定如何使用纯 CSS（没有 javascript）来做到这一点，如果有人能指出我正确的方向，我将不胜感激？

Answer 1

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

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

Answer 2

你可以把它放在你的内容中，并将内容设置为overflow: hidden。