圖片將不會出現在網頁上

我在我的html上添加了幾張圖片，但沒有顯示在網頁上。圖片的目錄路徑是正確的，第一張圖片出現在我添加剩下的圖片之前。我認爲這是與高度有關的事情，所以我增加了CSS的高度，但仍然沒有。圖片將不會出現在網頁上

不知道是否有幫助找出無圖像，但我已經粘貼下面我代碼：

<section class="pictures"> 
     <div class="container"> 
      <div class="row1"> 
       <div id="first" class="img1" style="background-image:url(images/page-1_img1.jpg);"> 
       </div> 
       <div id="second" class="img2" style="background-image:url(images/page-1_img2.jpg);"> 
       </div> 
      </div> 
      <div class="row2"> 
       <div id="third" class="img3" style="background-image:url(images/page-1_img3.jpg);"> 
       </div> 
       <div id="fourth" class="img4" style="background-image:url(images/page-1_img4.jpg);"> 
       </div> 
       <div id="fifth" class="img5" style="background-image:url(images/page-1_img5.jpg);"> 
       </div> 
      </div> 
     </div> 
    </section>

CSS：

.container { 
    height: 500px; 
    width:1024px; 
}

謝謝。

來源

2017-04-19 Bibek Sharma

由於正在使用的圖像作爲背景圖像，則必須定義至少一個height（優選也是width）爲他們的所有容器，即#first，否則#second等

（因爲他們不」噸有任何其他內容），這些元素將具有零高度，所以背景圖像將保持無形

增加：實際上，它更有意義，而不是使用使用圖像作爲背景圖像img標籤，如果你是沒有針對任何需要背景圖像的特殊解決方案。如果你堅持使用背景圖像，你還必須定義它們的尺寸和no-repeat。

來源

2017-04-19 20:54:32 Johannes

由元素，約翰內斯意味着你的'div's。你需要一個寬度或不重複你的背景圖像，否則你會一遍又一遍地得到一排相同的圖像 – indubitablee

如果沒有特定的原因，我建議使用。編輯：錯字 – Sens

謝謝。使用img標籤是有意義的，而不是使用背景圖像。因爲我只想顯示圖像而不是背景圖像。 –

圖片將不會出現在網頁上

回答

相關問題