Question

我是CSS初学者。我有两个独立的容器，应该有一个背景图像。我正在使用z-index，但我不知道如何使它工作。

<!-- Background Image -->
<div class="bg-img"><img class="img-responsive" src="images/bg/bgtriangle.png">

<!-- First Container -->
 <div class="container-main">
  <p class="font-relative">Headline 1</p>                      
 </div> 

<!-- Second Container -->
 <div class="container-fluid" style="background-color: #574c5d; border-top: 2px solid     #e57e22;"> 
  <h4 class="text-center" style="padding: 5px;">Headline 2</h4>
 </div>

</div>

CSS是：

.container-main {
  width: 100%;
  height: 100%;
  padding-top: 70px;
  padding-bottom: 15px;
  background: #453a4b;
  background-size: cover;
  z-index: 1;
}

.container-fluid {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;      
}   

.bg-img {
  position: fixed;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: 0;
}

如何在全宽度下为两个容器使用这个bg-image？这可能吗？

Answer 1

您需要将图片设置为background-image的{{1}}，而不是将其添加为HTML bg-img元素。此外，您根本不需要z-index - 可以从CSS中删除它们。

img

编辑：

如果你想在背景图片后面移动div的背景，同时将内容保持在它上面，你将会陷入一种混乱的局面。您可以通过从div中删除内容，然后将所有内容定位为绝对值并使用z-index（图像后面的-1和图像前面的1个）来完成此操作。但是，这意味着您必须使用top / left / etc。把内容放回到他们的div中。

Here is a demo 我完成的修补工作，也许会对你有所帮助。

Bootstrap - 两个div的一个背景图像

1 个答案: