Question

我是HTML / CSS的新手，我正在设计一个基本的网页。我添加了背景图像并显示了它的信息。但是，当我滚动网页时，图像仍然固定在开头，当我向下滚动时，它不会显示任何背景。我附上了描述我问题的图片。

这是关于打开HTML文件的页面

这是我向下滚动的页面

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | HOME
    </title>
</head>
<style>
    h2
    {
        color: yellow;
        font-family: courier;
    }
    body
    {
        position: absolute;
        top = 0;
        bottom = 0;
        left = 0;
        right = 0;
        background-image:url("tomb_raider_definitive_edition.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }
    .noselect /* Disable Copy Text */
    {
        -moz-user-select:none; /* Mozila FireFox */
        -ms-user-select: none; /* Internet Explorer */
        -webkit-user-select: none; /* Chrome, Safari, and Opera */
    }

</style>
<body>
<span style="color:red"></span>
<h2 class="noselect; h2">TOMB_RIDER (2013)</h3>
    <pre class="noselect">
        <!-- Some Info here -->
    </pre>
<p class="noselect" style="font-family: verdana;"><strong>TOMB_RIDER</strong></p>
    <a href="https://upload.wikimedia.org/wikipedia/en/f/f1/TombRaider2013.jpg">
    <img src="TombRaider2013.jpg">
    </a>
    <table border="1px"; style="border-style:solid;" class="noselect">
        <!-- Table code-->
    </table>
    <h2 class="noselect">Requerment !</h2>
</body>
</html>

我想要的是背景图像应该保持固定，只应滚动内容。

我还尝试了position: relative;和position: fixed;，但没有一个正在运作。在询问之前，我还在SO和W3Schools上进行了搜索，但我无法找到解决问题的方法。

任何形式的帮助将不胜感激。谢谢。

Answer 1

试一试

body
{
    position: absolute;
    top = 0;
    bottom = 0;
    left = 0;
    right = 0;
    background-image:url("tomb_raider_definitive_edition.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

Answer 2

根据W3schools

background-attachment: scroll|fixed|local|initial|inherit;

检查此属性，这将解决您的问题..

此处，值fixed用于修复视口的背景。

您可以像这样编辑代码 -

body
{
    background-attachment: fixed;
    position: absolute;
    top = 0;
    bottom = 0;
    left = 0;
    right = 0;
    background-image:url("tomb_raider_definitive_edition.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

希望这会有所帮助。

Answer 3

尝试使用 background-attachment: fixed; ，因为这会将背景图像附加到视口。

背景图像在滚动时不保持固定

3 个答案: