Question

我的CSS代码如下：

    body {
        background-image: url(images/bg.png);
        background-attachment: scroll;
        background-repeat: no-repeat;
        background-size: 100%;
    }

背景图片显然比标准网页大，但它仍然不会让我向下滚动。

[旁注 - 我也无法在设计视图中向下滚动：http：//www.meikledesign.co.uk/host/example.jpg]

Answer 1

为了测试目的，给身体一个有限的高度。

body {
   height: 2000px;
}

如果我没记错的话，背景不会人为地增加html页面的主体（默认定义为100％，100％的浏览器窗口）。

Answer 2

将身体最小高度更改为bg.png高度，不是太漂亮的解决方案，但可以正常工作

Answer 3

如果您尝试获得自适应背景，请查看此perfect-full-page-background-image

你可以通过css3实现这一点，如下所示：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

但是这样它在所有浏览器中都不起作用。检查我为crossbrowser解决方案提供的链接。

关于滚动，您可以像其他成员之前所说的那样，通过向身体添加min-height来实现。

CSS / HTML页面不会滚动

3 个答案: