1

そのため、時間に基づいて Web ページの背景を変更したいと考えています。つまり、昼用の 1 つのイメージと夜用の 1 つのイメージです。このサイトで見つけた非常に優れた投稿がありますが、これは完全に機能しますが、もう 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

サンプル ページでは、時間スクリプトのように document.body.background ではなく、bg という名前の div に背景画像を配置していることがわかります。次に、ソースの上部にある style タグにその div の css を設定します。(右クリックして「ソースを表示」。)

したがって、例を模倣したい場合は、次のように本体に div を作成します。

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

次に、必要なスケーリング CSS が div に含まれていることを確認します。開始するのに適した場所は、ここでもサンプル ページです。

    #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 に答える