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

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 个解决方案

解决方案1
3 2016-07-20 18:10:53

解决方案2
3 已采纳 2016-07-20 18:24:26

解决方案3
1 2016-07-20 18:20:51

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

问题描述

3 个解决方案

解决方案1 3 2016-07-20 18:10:53

解决方案2 3 已采纳 2016-07-20 18:24:26

解决方案3 1 2016-07-20 18:20:51

解决方案1
3 2016-07-20 18:10:53

解决方案2
3 已采纳 2016-07-20 18:24:26

解决方案3
1 2016-07-20 18:20:51