旋转木马覆盖背景图像

Question

Soo ...如果任何人有几分钟的时间，可以看看我的代码，并帮助我在这里...我有一个问题，我无法解决，并一直在破坏我的头现在时间...

所以我使用的是引导在一个页面为当地血库足协和我想要实现这个：转盘叠加的背景图像，不介意的蓝色和黄色事情......

和这是我得到：

这里是我的代码： HTML：

<!--Background image--> 
    <div class="bg"> 
    <img src="img/football-field.jpg" class="img-responsive" alt="ozadje"> 
    </div> 

<!--Main content of page-->  
<section id="main-content"> 
     <div class="container"> 
      <div class="col-md-2 col-sm-2 navigation"> 
      content content 
      content content 
      content content 
      content content 
      content content 
      content content 
      </div> 
      <!--Beginning of carousel--> 
      <div class="col-md-10 col-md-10 galery"> 
      <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
       <!-- Indicators --> 
       <ol class="carousel-indicators"> 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
       <li data-target="#myCarousel" data-slide-to="2"></li> 
       </ol> 

       <!-- Wrapper for slides --> 
       <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="img/example.jpg" alt="desc"> 
       </div> 

       <div class="item"> 
        <img src="img/example.jpg" alt="desc"> 
       </div> 

       <div class="item"> 
        <img src="img/example.jpg" alt="desc"> 
       </div> 
       </div> 

       <!-- Left and right controls --> 
       <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
       <span class="sr-only">Previous</span> 
       </a> 
       <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
       <span class="sr-only">Next</span> 
       </a> 
      </div> 
      </div> 
     </div> 
     </section> 

和我CSS：

.bg{ 
    height: 420px; 
    z-index: -999; 
} 

#main-content{ 
    z-index: 100; 
    background-color: white; 
} 

我真的apreciate一些帮助:)

附：我希望你明白我的意思，我试图acomplish ......英语不是我的母语所以有可能的话和坏exlenation的一些糟糕的选择和错别字很多:)

Answer 1

您可以为您的元素设置位置值，以便z-index起作用。这是要么使用职位fixed, absolute, or relative。请注意，它们不一样，你需要添加一些CSS。请参阅说明here。

样品：

header { 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
header img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.start { 
 
    position: absolute; 
 
    z-index: 100; 
 
    top: 0; 
 
} 
 

 
.navigation { 
 
    background: #F7F7F7; 
 
} 
 

 
#main-content{ 
 
    position: relative; 
 
    background-color: white; 
 
    margin-top:-1.5em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<!--Main content of page-->  
 
<section id="main-content"> 
 
    <header> 
 
    <img src="https://image.shutterstock.com/z/stock-photo-american-football-players-in-the-action-grand-arena-345202907.jpg" alt="ozadje"> 
 
    </header> 
 
     <div class="container start"> 
 
      <div class="col-md-2 col-xs-2 navigation"> 
 
      content content 
 
      content content 
 
      content content 
 
      content content 
 
      content content 
 
      content content 
 
      </div> 
 
      <!--Beginning of carousel--> 
 
      <div class="col-md-10 col-xs-10 galery"> 
 
      <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
       <!-- Indicators --> 
 
       <ol class="carousel-indicators"> 
 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
 
       <li data-target="#myCarousel" data-slide-to="2"></li> 
 
       </ol> 
 

 
       <!-- Wrapper for slides --> 
 
       <div class="carousel-inner"> 
 
       <div class="item active"> 
 
        <img src="http://via.placeholder.com/950x250" alt="desc"> 
 
       </div> 
 

 
       <div class="item"> 
 
        <img src="http://via.placeholder.com/950x250" alt="desc"> 
 
       </div> 
 

 
       <div class="item"> 
 
        <img src="http://via.placeholder.com/950x250" alt="desc"> 
 
       </div> 
 
       </div> 
 

 
       <!-- Left and right controls --> 
 
       <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
       <span class="glyphicon glyphicon-chevron-left"></span> 
 
       <span class="sr-only">Previous</span> 
 
       </a> 
 
       <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
       <span class="glyphicon glyphicon-chevron-right"></span> 
 
       <span class="sr-only">Next</span> 
 
       </a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </section>

Answer 2

它看起来并不很如果你运行它，不错，但你也可以从这段代码中得到一个想法。而不是使用一个div并插入图像（其中推你的DIV下），你可以在CSS中设置背景图片：

#main-content{ 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Football_iu_1996.jpg/1200px-Football_iu_1996.jpg"); 
 
    background-color: white; 
 
} 
 

 
.item img { 
 
    min-width: 100%; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!--Main content of page-->  
 
<section id="main-content"> 
 
     <div class="container"> 
 
      <div class="col-md-2 col-sm-2 navigation"> 
 
      content content 
 
      content content 
 
      content content 
 
      content content 
 
      content content 
 
      content content 
 
      </div> 
 
      <!--Beginning of carousel--> 
 
      <div class="col-md-10 col-md-10 galery"> 
 
      <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
       <!-- Indicators --> 
 
       <ol class="carousel-indicators"> 
 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
       <li data-target="#myCarousel" data-slide-to="1"></li> 
 
       <li data-target="#myCarousel" data-slide-to="2"></li> 
 
       </ol> 
 

 
       <!-- Wrapper for slides --> 
 
       <div class="carousel-inner"> 
 
       <div class="item active"> 
 
        <img src="http://lorempixel.com/400/200/sports/" alt="desc"> 
 
       </div> 
 

 
       <div class="item"> 
 
        <img src="http://lorempixel.com/400/200/sports/" alt="desc"> 
 
       </div> 
 

 
       <div class="item"> 
 
        <img src="http://lorempixel.com/400/200/sports/" alt="desc"> 
 
       </div> 
 
       </div> 
 

 
       <!-- Left and right controls --> 
 
       <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
       <span class="glyphicon glyphicon-chevron-left"></span> 
 
       <span class="sr-only">Previous</span> 
 
       </a> 
 
       <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
       <span class="glyphicon glyphicon-chevron-right"></span> 
 
       <span class="sr-only">Next</span> 
 
       </a> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </section>

这可能不是完全按照你想要它，但它可能帮助你走上正轨。

希望它有一点帮助。

Answer 3

仅使用z-index在背景图像上显示内容不起作用。实际上，z-index只适用于绝对或固定位置的元素。

最容易，我相信最干净的方式来实现你想要的是把你的图像作为你的页面的背景（与CSS'背景'proprety）。

#main-content{ 
background-image: url('img/football-field.jpg'); 
background-color: white; 
} 

另一种方法是让你的部分重叠背景div。

#main-content{ 
position: absolute; 
top: 0; 
left: 0; 
background: none; 
}