html - 複数のフルサイズの背景画像

Question

そこで、ブラウザを自動的に塗りつぶす背景画像を設定するさまざまな方法を学びました。html と css のみを使用してフルスクリーンの背景画像を設定し、その下に別のフルスクリーンの背景画像を配置して、サイトを最初に起動したときに最初の画像が表示され、下にスクロールすると 2 番目の画像が表示される方法はありますか?

Answer 1

次のようにできます。

実施例

html {
    height:1200px;
    width:600px
}
body {
    height:100%;
    width:100%;
    background: url(http://example.png) no-repeat 50% 600px/600px, url(http://example2.png) no-repeat top/600px 600px;
}

または、流動的である必要がある場合は、次のようにします。

実施例2

body, html {
    height:100%;
    width:100%;
    margin:0;
}
#div1 {
    height:100%;
    width:100%;
    background: url(http://example.png) no-repeat 50%/cover;
}
#div2 {
    height:100%;
    width:100%;
    background: url(http://example2.png) no-repeat 50%/cover;
}