Question

我对编码很陌生，所以请原谅任何简单的错误。我已经尝试过这样做了，但我还没有找到我想要的确切解决方案。

基本上，我想要的是着陆页的全屏背景。在这个登陆页面上，我有一个垂直＆amp;标题/介绍的水平居中的div。当我向下滚动时，我想要一个适合整个屏幕宽度的白色div，并且基本上滚动背景并移动标题div。

这是我到目前为止所拥有的：

＆＃13;

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;
	
}

＆＃13;

<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>

＆＃13;

基本上，＆＃34;大白＆＃34;应该是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;
}

Answer 2

将背景重复属性添加到css body elemnt

body{
    ...
    background-repeat: no-repeat;
}

全屏BG，在初始着陆屏幕上滚动的div

2 个答案: