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）我所做的是在第一个div下面添加了一个<img>（所以div与类的介绍）。 img有一个bg的分支。

比添加这个css：

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

这里有一个工作小提琴。我添加了很多<br>标签，以证明它有效。

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

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

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

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

1 个答案: