【问题标题】:CSS: Keeping background scrollCSS:保持背景滚动
【发布时间】:2010-08-12 16:15:21
【问题描述】:

我有问题。 我的 css 正文背景如下所示:

background: url(../doubletwo.jpg) top center repeat-x #000; 
background-attachment: fixed;

doubletwo.jpg 为 8px × 580px 现在我开始向我的网站添加更多内容,在 580px 结束后,它显示颜色 #000。

我想保持背景 STUCK 并且不应该随着网站滚动,所以高度的像素结束并显示 #000.. 我该如何解决这个问题? 如您所见,我尝试了 background-attachment: fixed;但我不知道它是否正确,但它似乎没有,因为它不起作用..

【问题讨论】:

  • fixed 应该可以工作。也许您还有其他一些与之冲突的 CSS?

标签: css


【解决方案1】:

CSS: background image does not fill when scrolling

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

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

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

【讨论】:

    【解决方案2】:

    我假设你有 body css 选择器的背景。您需要将overflow 设置为滚动。

    body
    {
        background: url(../doubletwo.jpg) top center repeat-x #000;
        overflow:scroll;
    }
    

    这将阻止正文超出屏幕,然后您的内容将在正文中滚动。

    【讨论】:

    • 这并没有解决问题,它只是在我的浏览器中添加了一个宽度滚动条,这有点难看..
    • 如果你改用overflow:auto,它只会在必要时显示滚动条。不过,您根本不必更改 body 上的溢出。
    猜你喜欢
    • 1970-01-01
    • 2011-09-23
    • 2017-04-20
    • 1970-01-01
    • 1970-01-01
    • 2023-03-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多