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

HTML Content pushed down below a fixed background image

本文关键字：背景 图像 下推 HTML      更新时间：2023-09-26

我的页面开始时（<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版本也能正确显示这一点，但前提是不在兼容性视图模式下。

内容应该"悬停"在背景图像上，这样当页面滚动时，内容就会滚动，但背景保持静止。相反，页面的其余内容被向下推到背景图像的底部，然后从那里进行渲染。所以，我的页面看起来什么都不是，只是它的背景图像，你必须向下滚动才能看到它下面的页面内容

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

如果你只想要一个固定的背景图像，我不会使用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; 
}
相关文章：