爲什麼我的圖片不顯示Html？

我寫了這個簡短的代碼，但我的背景圖像並沒有出現..這很奇怪，因爲如果我改變例如寬度和高度'px'它顯示爲什麼我的圖片不顯示Html？

我試圖顯示背景圖像與屏幕的全長和適合在div標籤有什麼建議嗎？

<!DOCTYPE HTML> 
<html> 
<head> 
     <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/> 
     <title>My Web Page</title> 

     <style> 



     .hola { 
      width:100%; 
      height: 100%; 
      background-image: url('../Img/imagenes/fotoportada.jpg'); 
      background-size: cover; 


      background-repeat: no-repeat; 
      } 

     </style> 
    </head> 

    <body> 
    <div class="hola"> 

    </div> 
    </body> 

</html>

來源

2014-01-25 user3013745

確定的路徑，你的形象是正確的？一旦我看到相對路徑，它就向我尖叫着錯誤的路徑。 –

您可以點擊瀏覽器上inspect元素內的圖片鏈接嗎？它會顯示圖像嗎？ –

元素的高度被指定爲100%。

這是針對其父元素計算得出的，它是auto（默認值）。

CSS定義100%的auto爲auto，因此該元素的高度需要包含其內容。

它沒有內容，因此這是0px。

這沒有給出高度渲染的圖像。

你可能想的元素及其所有祖先（body和html）上設置的100%的min-height。

來源

2014-01-25 16:02:09 Quentin

謝謝..你是正確的..它是關於高度，但設置高度作爲最小高度：100％沒有工作..
body，html { min-height：100％; } .hola { 寬度：100％; 身高：100％; background-image：url（'../ Img/imagenes/fotoportada.jpg'）; background-size：cover; background-repeat：no-repeat; } – user3013745

如果div沒有內容並且使用百分比，則它不會有寬度或高度。背景圖片不算作內容。

來源

2014-01-25 16:06:13 uSeRnAmEhAhAhAhAhA

只需添加位置：絕對; 它將工作，只要你想

.hola { 
      width:100%; 
      height: 100%; 
      background-image: url('../Img/imagenes/fotoportada.jpg'); 
      background-size: cover; 
      position:absolute; 

      background-repeat: no-repeat; 
      }

來源

2014-01-25 16:13:06 shiny

謝謝！這工作:)如果你有1分鐘。你能解釋爲什麼這有效嗎？謝謝！ – user3013745

位置屬性應該在那裏給元素一些命令，因爲你有寬度，高度，背景重複，默認情況下它需要靜態位置。這不能影響寬度高度和背景重複... – shiny

你可以試試：

body { 
    background: url('../Img/imagenes/fotoportada.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2014-01-25 16:49:07 user3235263

爲什麼我的圖片不顯示Html？

回答

相關問題