背景图片后的更多内容

对不起，如果我的问题不是最好的。我仍然进入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

背景图片后的更多内容

回答

相关问题