在一个非常小的网站上工作，一次性加载，所以有一个 div 保存所有背景图像，最重要的是（即。更高的 z 指数）有一个内容 div 包含所有内容。我可以根据选择的内容轻松切换背景。
不幸的是，我注意到如果你在一个小窗口中启动，就会出现滚动条，如果滚动则没有背景图像在页面的“显示”部分。 :-(
页面结构：
<body>
<div id="bg">
<div class="bgone"></div>
<div class="bgtwo"></div>
</div>
<div id="container">
<!-- content panels here -->
</div>
</body>
css:
#bg
{
margin: 0px;
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 1024px;
z-index:1;
}
.bgone
{
margin: 0px;
position: absolute;
width:100%;
height: 1024px;
background-image:url(../images/one.jpg);
background-position:top;
background-repeat:repeat-x;
z-index:2;
}
.bgtwo
{
margin: 0px;
position: absolute;
width:100%;
height: 1024px;
background-image:url(../images/two.jpg);
background-position:top;
background-repeat:repeat-x;
z-index:3;
}
#container
{
position:relative;
width:900px;
padding:0px;
margin:0px auto;
height:600px;
z-index:10;
}
我也遇到了同样的问题，这很烦人。对我来说，问题是我无法更改 HTML，只能更改 CSS，所以我无法删除额外的 div。
我看到的问题是背景有“宽度：100%”，容器有“宽度：900px”。例如，如果浏览器窗口的宽度为 800 像素，则背景设置为 800 像素，因此，当您水平滚动窗口时，您会看到没有背景的区域。
解决该问题的另一种方法是从背景中删除“width：100％”并将其替换为“min-width：900px”，从而强制背景始终至少与容器具有相同的宽度。当窗口大小小于 900px 时，背景始终与容器保持一致。工作是一种享受。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
