rek*_*eOf 26 css scroll background-image
在一个非常小的网站上工作,一次加载,所以有一个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;
}
Ste*_*teg 28
我有同样的问题,这很烦人.对我来说问题是我无法更改HTML,只能更改CSS,因此我无法删除其他div.
我看到的问题是背景有"宽度:100%",容器有"宽度:900px".因此,例如,如果浏览器窗口宽度为800px,则背景设置为800px,因此,当您水平滚动窗口时,将获得没有背景的区域.
解决问题的另一种方法是从背景中删除"width:100%"并将其替换为"min-width:900px",从而强制背景始终至少与容器的宽度相同.当窗口大小小于900px时,背景始终与容器保持一致.工作一种享受.
小智 10
我有同样的问题.这由overflow-x:scroll;
top:0px; bottom: 0px;
height: 100%;
background-repeat: repeat;
position: absolute;
overflow-x: scroll;
答案在这里：
简而言之，我让事情变得过于复杂。解决方案是：
就我而言（使用多个 bg 图像）：
为每个 bg 图像创建单独的 css 样式，然后
使用 jquery 将它们应用于身体 - 例如
$(body).addClass("specialbg");等
使用background-repeat:repeat-x只会为您提供沿着顶部重复的一行背景图像。如果您完全删除该 CSS 属性，它将水平和垂直平铺背景图像，这听起来像是您想要的。除非您的背景图像高度为 1024 像素，否则它们不会填充包含的 div。