我需要布置一个网页，其中包含两个必须拉伸以填充可用浏览器窗口的图像，但文本内容位于页面中心。到目前为止，我似乎能够做到这一点的唯一方法是，a）将两个图像合二为一，并将其设置为body 的背景图像，然后小心地垂直定位中间的内容带以适应间隙在图像之间，或者，b）将container（固定）div 嵌套在包含图像的container-fluid 和包含文本内容的固定位置中。然而，我看到了那些提倡嵌套引导容器的人的可怕警告和蔑视。
这张图片可能有助于传达我的需要：
“图像 1”必须横跨整个窗口，内容保持居中，与“图像 2”相同，在图像之间垂直有一条纯白色带，在屏幕右侧有一条纯灰色带底部。
【问题讨论】：
标签： html css twitter-bootstrap-3
你可以试试这个。
请注意，您必须根据设计需要应用一些自定义 css。效仿：
.container-fluid {
padding: 0;
}
.container-fluid.wrapper {
padding-top: 100px;
}
.ht33 {
height: 200px;
}
.container.content {
width: 970px;
position: absolute;
height: 800px;
background: gray;
color: #fff;
top: 0;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid wrapper">
<div class="container content"></div>
<div class="container-fluid bg-primary ht33"></div>
<div class="container-fluid bg-warning ht33"></div>
<div class="container-fluid bg-danger ht33"></div>
</div>【讨论】：
我对 BG 使用了 row 类，以在它们上产生网格感并消除填充。
HTML
<div class="container-fluid wrapper">
<div class="container content bg-primary"></div>
<div class="row bg-success bg"></div>
<div class="row bg-warning bg"></div>
<div class="row bg-danger bg"></div>
</div>
CSS
.container-fluid.wrapper {
padding-top: 100px;
}
.bg {
height: 200px;
}
.container.content {
width: 970px;
position: absolute;
height: 800px;
color: #fff;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
【讨论】：
你可以尝试这样做：
http://jsfiddle.net/kqoonr24/1/
您可能需要对其进行调整以适应您的需求，但这是基本理念。 :-)
基本上，您需要一个 div 作为背景并容纳构成每个背景元素的各个 div。
然后，在此之后，您将需要一个包含实际内容的前景 div。
html,
body,
.wrapper,
.foreground,
.background {
height: 100%;
width: 100%;
}
.foreground {
background-color: green;
max-width: 400px;
margin: 0 auto;
}
.background {
position: absolute;
z-index: -1;
}
.background > * {
height: 33%;
content: '';
}
.background-element-1 {
background-color: blue;
}
.background-element-2 {
background-color: red;
}
.background-element-3 {
background-color: orange;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body>
<div class="wrapper">
<div class="background">
<div class="background-element-1"></div>
<div class="background-element-2"></div>
<div class="background-element-3"></div>
</div>
<div class="foreground">
<div class="foreground-inner">
I am your text!
</div>
</div>
</div>
</body>您可能需要调整它，因为我做了很多假设 - 如果您需要更多帮助，请告诉我。
【讨论】：
container 用于“前景”的东西，但我会看到我能做什么。
我可能想到的最简单的例子，我假设你不知道背景图像的大小，这就是为什么我将它们放在不影响页面流的背景 div 中，而顶部有自然内容
<div class="images-wrapper">
<img src="..." alt="">
<img src="..." alt="">
</div>
<div class="container">
.......
</div> <!-- /container -->
body {
background:#ccc;
}
.images-wrapper {
position:absolute;
top:0;
left:0;
right:0;
background:#fff;
z-index:0;
}
.images-wrapper img {
display:block;
width:100%;
height:auto;
margin-top:30px;
}
.container {
z-index:2;
position:relative;
background:#fff;
}
【讨论】：