我一直在与 Bootstrap 中的整页背景图片作斗争。目前背景图像覆盖了页面的 90%，但我无法获取页面的最后 10%。它的行为就像某处有底边距，但实际上没有。
HTML:
<body>
<div class="jumbotron">
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<h1 style="font-weight: 400;" class="headline"><br></h1>
<h2 style="font-weight: 400;" class="tagline"></h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/139447981" id="video"></iframe>
</div>
</div>
<div class="col-sm-6">
<div class="text-center">
<h3><%= t('.call_to_action_headline') %></h3><br>
<h4 class="counter">123</h4>
<p><%= t('.endline') %></p>
<div class="subscribe text-muted text-center">
<%= form_for @user do |f| %>
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<%= f.text_field :email, class: 'form-control form-control-lg',
placeholder: 'Your email' %>
<span class="input-group-btn">
<%= f.submit t('.submit_button'), class: 'btn btn-primary btn-lg' %>
</span>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
@import url(https://fonts.googleapis.com/css?family=Lora:400,700);
@import "bootstrap";
@import "font-awesome";
body {
background-color: #ffffff;
}
.headline {
margin-top: 80px;
color: white;
}
h3 {
color: white;
}
#video {
margin-bottom: 300px;
}
p {
color: white;
}
.counter {
font-size: 5rem;
color: white;
}
.tagline {
margin-top: 20px;
margin-bottom: 100px;
color: white;
}
.jumbotron {
background: image-url('home-bg-1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
background-color: #ffffff;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
.jumbotron-text {
min-height: 25rem;
padding-top: 8rem;
padding-bottom: 6rem;
.container {
max-width: 50rem;
}
}
}
我想要一张全屏背景图片。这是它的样子:http://imgur.com/sdHJeZO
谢谢
最佳答案
默认情况下，大多数浏览器都会添加一定数量的边距，这可能会导致您出现问题。
以第一个 fiddle 为例:https://jsfiddle.net/n874j2yy/ ，如果您使用 Chrome 工具或浏览器检查器检查内容区域，您会注意到 <body> 添加了 8 像素的边距。标签，意思是 .test div 没有完全跨越视口(viewport)的整个宽度。
而在这个例子中，我使用了 viewport-height/viewport-width 值:height: 100vh/width: 100vw . https://jsfiddle.net/7u2yod66/1/ .我还覆盖了浏览器默认值 <body>通过添加 margin: 0 来 margin
而不是使用 height: 100%在 .jumobtron ，尝试使用 height: 100vh并从 <body> 中手动删除边距标签 ( margin: 0 )
关于css - Bootstrap 整页背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34593848/