javascript - 全屏 BG，在初始登陆屏幕上滚动的 div

Question

我是编码新手，所以请原谅任何简单的错误。我试过查找此内容，但没有找到我正在寻找的确切解决方案。

基本上，我想要的是着陆页的全屏背景。在这个着陆页上，我有一个垂直和水平居中的 div 用于标题/介绍。当我向下滚动时，我希望它成为一个适合整个屏幕宽度的白色 div，并且基本上在背景上滚动并将标题 div 向上移动。

这是我目前所拥有的:

html,body{
	height: 100%;
}

body{
	font-family: 'American Typewriter', serif;
	font-weight: lighter;
  background: url('https://upload.wikimedia.org/wikipedia/commons/8/83/An_old_barn_with_the_Big_Horn_Mountains_in_the_background._Not_far_from_Sheridan,_Wyoming.JPG') no-repeat 50% 50%;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}

div.name{
	font-size:100px;
	color: #fff;
display: block;
margin: 0 auto;
}

div.container-intro{
height:100%;
width:100%;
display: table;
margin: auto;

}

div.container-inner{
text-align: center;
vertical-align:middle;
display: table-cell;
}

a.main-link{
	border: 3px solid #fff;
	padding:5px;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	width:fixed;
}


div.big-white{
	background-color: #fff;
	width: 100%;
	margin:auto;
	
}

<div class="container-intro">
	<div class="container-inner">
<div class="name">title</div>
<div class="col-md-6 col-md-offset-3">
	
<a class="main-link col-md-4 col-md-offset-1" href="#">link</a> 
<a class="main-link col-md-4 col-md-offset-1" href="#">link</a>
</div>
</div>
</div>
<div class="row">
<div class="big-white col-md-12">
	Hello
</div>
</div>

本质上，“big-white”应该是 100% 宽度并在 bg 上滚动，推高初始 div。对不起，这没有很好地解释..

Answer 1

如果我理解正确你想要什么，只需在 CSS 中添加 fixed 到你的背景并将正文边距设置为 0px。

body{
    margin:0px;
    font-family: 'American Typewriter', serif;
    font-weight: lighter;
    background: url('https://foo.bar/img.JPG') no-repeat 50% 50% fixed;
    background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}