背景画像の後ろのコンテンツ

申し訳ありませんが、私の質問は最高の言葉ではありません。私はまだCSSとHTMLを使い、正しい用語を学んでいます。とにかく、自分のポートフォリオ用のホームページを作成しています。ホームページ上の画像の上にテキストを配置します。divを作成し、背景画像をCSSに適用しました。 divの中に、テキストとスクロールダウンの矢印を追加しました。背景画像の後ろのコンテンツ

私はサイトの次の部分を作成したいが、画像ではなく白い背景で作成したい。私は何をすべきか？ 2ページ目のdivを作成し、要素を追加すると同じ背景が表示されます。ありがとう。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.back { 
 
    background-image: url(http://i.imgur.com/9WgJg0G.gif); 
 
    background-size: cover; 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    z-index: 1; 
 
} 
 

 
.text { 
 
    display: flex; 
 
    justify-content: center; 
 
    padding-top: 37vh; 
 
    font-size: 8vh; 
 
    z-index: 9999; 
 
    color: #f39dbc; 
 
    text-shadow: 6px 6px #8ccddb; 
 
} 
 

 
.pageone { 
 
    font-family: 'Oswald', sans-serif; 
 
    letter-spacing: .75vh; 
 
} 
 

 
.scroll { 
 
    display: flex; 
 
    justify-content: center; 
 
    vertical-align: middle; 
 
    padding-top: 27vh; 
 
}

<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="pageone"> 
 
    <div class="back"> 
 
     <div class="text"> 
 
     <h1>1080</h1> 
 
     </div> 
 

 
     <div class="scroll"> 
 
     <img src="scrolldown.png" alt="" id="scroll" /> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="pagetwo"> 
 

 
    </div> 
 
</body>

出典

2017-08-16 Kuebiko

ちょうど 'ポジション削除：.back''からfixed'を？ –

あなた.pagetwo divがそれで何もしていないスタイルを持っていない - 私はそれに高さを追加し、さらにその要素を用いて固定作っていた.back要素（からposition: fixedを削除しましたスクロール時のビューポート）。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.back { 
 
    background-image: url(http://i.imgur.com/9WgJg0G.gif); 
 
    background-size: cover; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    z-index: 1; 
 
} 
 

 
.text { 
 
    display: flex; 
 
    justify-content: center; 
 
    padding-top: 37vh; 
 
    font-size: 8vh; 
 
    z-index: 9999; 
 
    color: #f39dbc; 
 
    text-shadow: 6px 6px #8ccddb; 
 
} 
 

 
.pageone { 
 
    font-family: 'Oswald', sans-serif; 
 
    letter-spacing: .75vh; 
 
} 
 

 
.scroll { 
 
    display: flex; 
 
    justify-content: center; 
 
    vertical-align: middle; 
 
    padding-top: 27vh; 
 
} 
 

 
.pagetwo { 
 
    height: 100vh; 
 
}

<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="pageone"> 
 
    <div class="back"> 
 
     <div class="text"> 
 
     <h1>1080</h1> 
 
     </div> 
 

 
     <div class="scroll"> 
 
     <img src="scrolldown.png" alt="" id="scroll" /> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="pagetwo"> 
 

 
    </div> 
 
</body>

出典

2017-08-16 21:13:39

ありがとう、私はそれを逃したとは思わない。私はその位置を忘れていた：固定。私はバックグラウンドの添付ファイルを持っていた：固定。視差効果を作成するには – Kuebiko

背景画像の後ろのコンテンツ

答えて

関連する問題