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

Question

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

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

我做错了什么？

Answer 1

验证这个link或 link

为您提供解决方案。

问题 1) 我所做的是添加一个 <img>在第一个 div 下面(所以是带有类介绍的 div)。 img 的类别为 bg .

比添加这个CSS:

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

这里有一个可以工作的 fiddle 。我加了很多<br>向您展示它有效的标签。

也可以尝试设置背景图片height:100%和 width:auto; .如果您这样做，图像将不会在某些屏幕上挤在一起。

问题 2) 我给每张幻灯片一个类幻灯片 1。我还添加到所有幻灯片类 position:relative; . Taka 看看这个 fiddle 。

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