Question

所以我希望根据时间改变网页的背景。也就是说，一天的一张图片和一张夜晚的图片。我在这个网站上发现了一个非常好的帖子，但是我需要它做一件事，用浏览器窗口缩放图像而不是用页面滚动。我找到的用于更改背景的代码是

</body>
<script type="text/javascript">
    var currentTime = new Date().getHours();
    if(5 < currentTime && currentTime < 18){
        if (document.body) {
            document.body.background = 'images/bg-day.png';
        }
    } else {
        if (document.body) {
            document.body.background = 'images/bg-night.png';
        }
}
</script>
</html>

但是我希望这些图像能够与浏览器窗口一起缩放并在滚动时保持固定，这样我的内容就会滚动。像这样 http://css-tricks.com/examples/FullPageBackgroundImage/css-2.php

目前我的整页背景工作正常，但我希望它能在晚上改变。

如果有人能解决这个问题，我会永远欠你的债。

由于

Answer 1

在您的示例页面中，您会看到他们将背景图片放在名为bg的div中，而不是像时间脚本中那样放在document.body.background中。然后，他们在源代码顶部的样式标记中设置div的css。（右键单击＆＃34;查看源＆＃34;。）

因此，如果您想模仿您的示例，请在您的身体中创建一个div，如下所示：

<body>
    <div id="bg">
        <img id="my-bg-image" src="images/bg-day.png" alt="">
    </div>
</body>

然后确保div具有您想要的缩放CSS。另一个好的起点是示例页面：

    #bg {
        position:fixed; 
        top:-50%; 
        left:-50%; 
        width:200%; 
        height:200%;
    }
    #bg img {
        position:absolute; 
        top:0; 
        left:0; 
        right:0; 
        bottom:0; 
        margin:auto; 
        min-width:50%;
        min-height:50%;
    }

然后，使用一点点jQuery魔术（只是为了让它变得更容易），修改你的时间if语句如下：

if(5 < currentTime && currentTime < 18){
    $('#my-bg-image').attr('src', 'images/bg-day.png');
} else {
    $('#my-bg-image').attr('src', 'images/bg-night.png');
}

如果您决定使用jQuery，请不要忘记包含jQuery。

Answer 2

只需将背景设置为固定，与javascript无关。
将其添加到CSS样式中：

body {
    background-attachment: fixed;
}

根据时间和比例将背景更改为浏览器窗口

2 个答案: