Bootstrap - 全屏标题图像后跟背景图像答案

【问题标题】：Bootstrap - full screen header image followed by background imageBootstrap - 全屏标题图像后跟背景图像
【发布时间】：2017-03-03 05:05:04
【问题描述】：

Bootstrap 的新功能。我在设置背景图片以跟随标题图片时遇到问题。

标题部分有它自己的全屏背景，然后我希望后面跟着一个平铺的背景图像。

我试过了：

<div class="header">...</div>

<div class="main-body">
    <div class="container">...</div>
    <div class="container">...</div>
    ...
</div>

<div class="footer">...</div>

使用以下样式表：

.main-body {
    text-align: center;
    background: url(../img/setttings-bg-black.jpg) no-repeat center center;
    background-size: 1024;
    background-color: #000000;
}

.header {
    text-align: center;
    color: #000000;
    background: url(../img/promo-bg.jpg) no-repeat center center;
    background-size: cover;
}

问题是主体背景的顶部被标题主体的底部隐藏了。

我做错了什么？

【问题讨论】：

如果不知道图像的尺寸，可能很难诊断问题。您能否通过编辑您的问题并使用包含图像的 sn-p 功能（快捷键：Ctrl + M）来设置一个交互式示例？
看css定位

标签： html css twitter-bootstrap

【解决方案1】：

验证此link 或link

为您提供解决方案。

问题 1) 我所做的是我在第一个 div 下方添加了一个<img>（所以是带有类介绍的 div）。 img 的类为bg。

比添加这个css：

.bg{
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;
}

这里你有一个工作小提琴。我添加了很多<br> 标签来向你展示它的工作原理。

您也可以尝试设置背景图片height:100%和width:auto;。如果你这样做，图像在某些屏幕上就不会那么拥挤了。

问题 2) 我给每张幻灯片一个类 slide1。我还添加了所有幻灯片类position:relative;。看看这个小提琴。

我希望您的问题现在得到解答。如果您有其他问题，请随时提出。

【讨论】：