2017-05-17 19 views
-2

CSSのみで(ブートストラップ、jqueryなどではなく)複数の背景画像を上から順番に追加できますか?バックグラウンドであなたが部門に背景を設定する必要がありますより多くの画像のための[OK]をOutput.jpg is expected design of page with multiple images and scrolling property of page複数の背景画像をCSSで

+0

CSSとHTMLを動作するかどうかはい、教えてください。 – mrogers

+0

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds –

+0

@ジェムは、1つの背景イメージを別のレイヤーの上にレイヤーする方法を尋ねていますか、または順番に1つのイメージページの下をスクロールすると、その上にある別のイメージがその下にありますか? – mrogers

答えて

0

CSS:

#image1 { 
    background: url(image1.jpg) 
    height: 100%; 
} 
#image2 { 
    background: url(image2.jpg) 
    height: 100%; 
} 

はHTML: `

<div id="image1"></div> 
<div id="image2"></div> 

おそらく、これは動作しますが、スクロールプロパティを必要とする場合は、jQueryが必要です。または、すべての部門の最後にボタンを追加し、hrefを次の部門に設定します。例:

<div id="image1"> 
    <a class="next-page" href="#image2">next-page</a> 
</div> 
<div id="image2"></div> 

これは

+0

@NicolòLafasciano 上記のコードはCSSとHTMLがうまくいきました。マージンプロパティもここで助けました。ありがとう。 \t#image1 { \t \t background-image:url(admin.jpg); \t \t高さ:100%; \t \t background-repeat:no-repeat; \t} \t#image2 { \t \t margin-top:65%; \t \t背景画像:url(accountant.jpg); \t \t background-repeat:no-repeat; \t \t高さ:100%; \t \t幅:200% \t} – Gems

+0

コーディングで楽しい – Lafa