css - CSS：滚动时背景图像不填充

Question

在一个一次性加载的非常小的站点上工作，因此有一个 div 包含所有背景图像，并且在此之上（即更高的 z-index）有一个内容 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;
}

score 28 · Accepted Answer

我有同样的问题，这很烦人。对我来说问题是我无法更改 HTML，只能更改 CSS，所以我无法删除额外的 div。

我看到的问题是背景有“宽度：100％”而容器有“宽度：900px”。因此，例如，如果浏览器窗口的宽度为 800 像素，则背景设置为 800 像素，因此，当您水平滚动窗口时，您将获得没有背景的区域。

解决此问题的另一种方法是从背景中删除“宽度：100%”并将其替换为“最小宽度：900px”，从而强制背景始终至少与容器宽度相同。当窗口大小小于 900 像素时，背景始终与容器保持一致。工作一种享受。

score 10 · Accepted Answer

我有同样的问题。这由溢出-x 修复：滚动；

    top:0px; bottom: 0px;
    height: 100%;
    background-repeat: repeat;
    position: absolute;
    overflow-x: scroll;

score 5 · Accepted Answer

答案在这里：

简而言之，我把事情弄得太复杂了。解决方案是：

摆脱保存 bg 图像的 div - 您必须将尺寸设置为 100% 才能看到 bg img，但这只是可视区域/视口的 100%，滚动时不会重新计算。
将任何 bg 图像直接应用于 body 元素，因为它的尺寸不限于视口的初始大小

在我的情况下（使用多个 bg 图像）：

为每个 bg 图像创建单独的 css 样式，然后
使用 jquery 将它们应用于身体 - 例如 $(body).addClass("specialbg");等

score 3 · Accepted Answer

我会在 Steg 的建议中添加“从背景中删除 'width: 100%' 并将其替换为 'min-width: 900px'”的建议，即您不应该删除 width: 100%，而只需添加一个最小宽度。否则，如果宽度大于最小宽度，某些浏览器可能不会重复超出最小宽度。

score 3 · Accepted Answer

我遇到了这个问题并修复了：

html {
    background-image: url('http://www.standardbrand.com/media/1237/home.jpg');
}
body{
    color: white;
    background: transparent;
}

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      </ul>
    </body>
  </html>

score 2 · Accepted Answer

2

In my case the solution was to set fixed height and/or width to the div in question.

于 2011-11-15T18:50:18.580 回答

score 2 · Accepted Answer

使用background-repeat:repeat-x只会给你一排在顶部重复的背景图像。如果您完全删除该 CSS 属性，它将水平和垂直平铺背景图像，这听起来像是您想要的。除非您的背景图像高 1024 像素，否则它们不会填充包含的 div。

score 2 · Accepted Answer

使用 background-attachment: fixed;不会随页面滚动的背景图像。所以只有内容被滚动。

       body {

        background-image: url("image.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
      }

score 1 · Accepted Answer

1

只需添加“背景附件：固定；” 为我工作！

于 2021-09-03T16:13:55.957 回答

score 1 · Accepted Answer

请注意，如果您在父/元素上设置了高度，它也可能会破坏图像。

例如，大多数人在他们的代码中使用它

body {
   height: 100%; //avoid it
}

css - CSS：滚动时背景图像不填充

10 回答 10

Related

Reference