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

Change background based on time and scale to browser window

本文关键字：背景 窗口 时间 浏览器      更新时间：2023-09-26

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

</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 php - 2.

目前我已经得到了整个页面的背景工作良好，但我希望它改变在晚上。

如果有人能弄明白这一点，我将永远欠你一个人情。

谢谢

在您的示例页面中，您将看到他们将背景图像放在名为bg的div中，而不是像您的时间脚本中那样将document.body.background放在div中。然后，他们在源顶部的样式标签中设置该div的css。(右键点击"查看源文件")

所以如果你想模仿你的例子，在你的正文中创建一个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魔法(只是为了使它更容易)，修改timeif语句如下:

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，不要忘记使用它。

只需将背景设置为fixed，这与javascript无关。
添加到你的CSS样式中:

body {
    background-attachment: fixed;
}
相关文章：