背景圖片後的更多內容

對不起，如果我的問題不是最好的。我仍然進入CSS和HTML並學習正確的術語。無論如何，我正在爲我的投資組合創建一個主頁，並將文本置於主頁上的圖像頂部，我創建了一個div並將背景圖像應用於CSS。在div裏面，我添加了文本和一個向下滾動的箭頭。背景圖片後的更多內容

現在我想創建我的網站的下一部分，但有白色背景，而不是圖像。我該怎麼辦？我爲第二頁創建了一個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

只是刪除'位置：fixed'從'.back'？ –

你.pagetwo格中有任何事情和任何風格 - 我從.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

背景圖片後的更多內容

回答

相關問題