将HTML内容下推到固定背景图片下方

Question

我的页面以此开始（在<body>标记之后的第一件事）：

<div id="wallpaper" style="width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1;">
    <img src="images/black-matte-1650-Lit-Etched.jpg" style="width: 100%; height: 100%;" alt="">
</div>

在兼容视图模式下，此功能在除IE之外的所有浏览器上均可正常运行。 甚至大多数IE版本都可以正确显示此内容，但前提是不能在“兼容视图”模式下显示。

内容应该“悬停”在背景图像上，以便随着页面滚动，内容也滚动，但是背景保持静止。 而是将页面的其余内容下推到背景图像的底部，然后从那里进行渲染。 因此，我的页面看起来只是背景图像，而您必须向下滚动才能看到其下面的页面内容。

谁能解释出什么问题了，以及如何解决这个问题？

Answer 1

如果您只想要固定的背景图像，则不会使用div。 试试这个...

CSS：

body{
    background:url(images/black-matte-1650-Lit-Etched.jpg) top right no-repeat; background-attachment:fixed; 
}

然后从HTML删除墙纸div和图像。

编辑：如果该div需要与页面其余部分不同的背景，也可以将该CSS应用于div：

div#wallpaper{
    background:url(images/black-matte-1650-Lit-Etched.jpg) top right no-repeat; background-attachment:fixed; 
}

将HTML内容下推到固定背景图片下方

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-03-25 20:14:17

将HTML内容下推到固定背景图片下方

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-03-25 20:14:17

解决方案1
2 已采纳 2015-03-25 20:14:17