Question

的jsfiddle：

我的页面背景图片和内容以图片为中心。这一切都运行正常，我已经设置了我需要它，但现在我需要在图像下面添加内容。

CSS for image：

img.home-bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 100px;
}

您可以从小提琴中看到，当我在div下方添加任何内容时，其中的图像并未显示在图像下方。它显示在它上面或在它下面。我需要能够将内容放在用户可以向下滚动以查看的图像下。

Answer 1

抱歉，由于低代表，我无法在您的帖子下发帖。

请看这个链接告诉我你的想法，这是否回答了你的问题？ Code

$(document).ready(function(){
    $(".home-callout").css("margin-top",$(".home-bg").height()+200);
});

另外，请注意，当您使用这样的背景时，您正在修复图像，并且整个内容永远不会低于图像本身。请参阅CSS代码，其中min-height：100％;

Answer 2

当您将某些内容设置为position: fixed时，它会将其从文档流中取出。因此，其他元素不关心它在页面上的位置，而其他元素也不会相对于它自己定位。这就是为什么你的文字只显示在顶部。因为图像是固定的。

我会删除将图片设置为fixed的CSS。

CSS：

img.home-bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin-top: 100px;
}

如果你真的想要修复图像并滚动内容，你可以定位内容，也可以设置边距。或者您可以使用javascript来获取图像高度并动态设置内容位置。