Question

我正在尝试获取可向上/向下滚动的背景以允许查看图像。代码似乎是正确的，但它不允许我滚动。这就是我所拥有的：

<!DOCTYPE html>
<html>
    <!--CSS init-->
    <style>
        html {
            background-image: url("../Pictures/example_bg.png");
            background-repeat: no-repeat;
            background-attachment: scroll;
        }
    </style>
</html>

Answer 1

使用background-attachment: scroll;表示滚动时背景将跟随页面。这是默认值，因此您无需指定它。

您无法滚动查看整个图片，因为您的body元素中没有任何内容（根本没有body元素），因此页面只有几个像素高（默认边距/填充）。在body元素中放置一个元素，并为其指定与背景图像一样高的高度，然后就可以滚动。

你也应该有一个head元素，这就是风格所在：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        html {
            background-image: url("../Pictures/example_bg.png");
            background-repeat: no-repeat;
            background-attachment: scroll;
        }
        div {
            height: 4320px;
        }
    </style>
</head>
<body>
  <div></div>
</body>
</html>

Answer 2

如果您只想滚动图片，只需将其放在IMG元素中即可。您不需要将它放在背景上，除非您打算将它放在它上面。

此外，您的HTML永远不会像您编写的那样工作。我建议你买一本体面的书并通过它来完成它。 HEADFIRST HTML非常适合初学者。

Answer 3

你也可以写为background-position：fixed; 并且还可以使身体非常大的高度，以便您可以看到卷轴。

用CSS滚动背景

3 个答案: