旋轉木馬覆蓋背景圖像

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