背景圖像不會顯示在引導程序傳送帶上

我似乎無法獲取背景圖像以在傳送帶上工作。其他一切似乎都在工作，但我無法讓這些工作。背景圖像不會顯示在引導程序傳送帶上

<!DOCTYPE html> 
<head> 
    <meta charset="UTF-8> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width = device-width, initial-scale = 1"> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

這是我放置css爲了設置背景大小和我計劃用於每張幻燈片的圖像。我已經檢查並重新檢查，以確保圖像的路徑是正確的，它是100％。

<style type="text/css"> 
     .slide1{ 
      background-image: url('images/image01.jpg'); 
      height: 500px; 
      background-repeat: no-repeat; 
      background-position: center; 
      background-size: cover; 
     } 
     .slide2{ 
      background-image: url('images/image02.jpg'); 
      height: 500px; 
      background-repeat: no-repeat; 
      background-position: center; 
      background-size: cover; 
     } 
     .slide3{ 
      background-image: url('images/image03.jpg'); 
      height: 500px; 
      background-repeat: no-repeat; 
      background-position: center; 
      background-size: cover; 
     } 

    </style> 
</head> 
    <body> 

     <div id="theCarousel" class="carousel slide" data-ride="carousel"> 

      <ol class="carousel-indicators"> 
       <li data-target="#theCarousel" data-slide-to="0" class="active"> </li > 
       <li data-target="#theCarousel" data-slide-to="1"> </li> 
       <li data-target ="#theCarousel" data-slide-to="2"> </li> 
      </ol >

這裏是我使用連接到特定幻燈片的類。在我看來，我的代碼是正確輸入的，但似乎無法弄清楚爲什麼圖像不顯示。

  <div class="carousel-inner"> 
       <div class="item active" > 
        <div class ="slide1"></div> 
       </div> 
       <div class="item"> 
        <div class="slide2"></div> 
       </div> 
       <div class="item"> 
        <div class="slide3"></div> 
       </div> 
      </div> 

      <a class="left carousel-control" href="#theCarousel" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"> </span> 
      </a> 
      <a class="right carousel-control" href="#theCarousel" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </a> 
     </div> 


     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

來源

2017-03-15 Caarn

我能夠通過設置div的高度和寬度（在我的情況下爲100％）來讓他們工作。看起來也許如果沒有什麼包含在旋轉木馬項目中，它的默認大小是0，所以背景圖像不可見。

我使用Bootstrap 4，並將背景直接應用到旋轉木馬項目div，但如果您將width:添加到您現有的slide1等類中，它可能也會有效。

.carousel-item { 
    height:100%; 
    width:100%; 
} 

<div class="carousel-inner"> 
    <div class="carousel-item active slide1" > 

    </div> 
</div>

或

.slide1{ 
    background-image: url('images/image01.jpg'); 
    height: 500px; 
    width: _____; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
}

來源

2017-05-13 20:02:54 Carolyn

背景圖像不會顯示在引導程序傳送帶上

回答

相關問題