Question

我的代码有点问题，但我找不到问题所在。如果我在css中使用带有“body”标签的backgraund，它会显示，但是如果我对div执行相同操作，它仍为白色。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div id="one">
        <header>
        </header>
        <section>
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

CSS

#one{
    background: url(../img/background.jpg);
    background-repeat: repeat;
    background-size: cover;
    display: block;
    height: 100%;
    width: 100%;
}

和javascript（只是加入）

$(function(){
    var x = 0;
    setInterval(function(){
        x-=1;
        $('body').css('background-position', 0 + 'px '+ x +'px');
    }, 200);
})

我尝试使用'body'并且它有效，但只适用于身体:(

Answer 1

要在#one div中使用100％的高度，您还需要为body和html标记设置100％的高度。没有此规则，100％宽度将起作用。因此，将以下行添加到您的css文件中：

html, body { height: 100%; }

Answer 2

这是您尝试使用的完整HTML吗？在您提供给我们的代码中，您的div没有大小，因为它没有内容。在snnipet中，您可以看到代码的内容已添加到div#one。

ramdom谷歌搜索图像用作测试目的的背景。

$(function(){
        var x = 0;
        setInterval(function(){
            x-=1;
            $('body').css('background-position', 0 + 'px '+ x +'px');
        }, 200);
    })

#one{
    background: url(http://7-themes.com/data_images/out/76/7030767-3d-background-wallpaper.jpg);
    background-repeat: repeat;
    background-size: cover;
    display: block;
    height: 100%;
    width: 100%;
}

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/style.css">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
        <div id="one">
            <header>
              <p>Sample Header</p>
            </header>
            <section>
            </section>
            <footer>
            </footer>
        </div>
</body>
</html>

css背景不在div中工作

2 个答案: