1

因此，我希望根据时间更改网页的背景。即，白天一张图像，夜晚一张图像。我在这个网站上找到了一篇非常好的帖子，效果很好，但我需要它来做一件事，用浏览器窗口缩放图像，而不是随着页面滚动。我发现更改背景的代码是

</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

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

如果有人能弄清楚这一点，我将永远欠你的债。

谢谢

4

2 回答 2

1

在您的示例页面中，您会看到他们将背景图像放在名为 bg 的 div 中，而不是像您的时间脚本中那样 document.body.background 。然后，他们在源顶部的样式标记中设置该 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 魔法（只是为了让它更容易），将你的 time 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，请不要忘记包含它。

于 2013-06-11T14:40:28.430 回答
0

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

body {
    background-attachment: fixed;
}
于 2013-06-10T16:14:56.477 回答