爲什麼我的背景不顯示？

-1

無論我嘗試什麼，我的背景圖片都沒有顯示出來。我希望它跨越整個背景空間。爲什麼我的背景不顯示？

這裏是我的CSS：

body { 
    background-image: url('../Project2/images/water.jpg') no-repeat center top; 
    background-size: cover; 
    font-family: Lucida Grande, Lucida Sans, Geneva, Arial, Helvetica, sans-serif; 
    font-size:  100%; 
    *font-size:  80%; 
    width: 1000px; 
    margin: 0 auto; 
    display: block; 
}

來源

2016-04-01 Ali Obermayer

您是否只嘗試使用背景屬性，或確保文件路徑正確？您可以在Chrome中檢查「開發人員工具」，如果路徑是您期望的路徑 –

請確保您的圖像路徑是正確的... – ochi

嘗試這樣的事情

body { 
    background-image: url("paper.gif"); 
    background-repeat: no-repeat; 
}

來源

2016-04-01 22:58:39 MadeInDreams

我試過了，它仍然不能正常工作:( –

試試只有圖像如果你可以將圖像文件放在與你的css文件相同的文件夾中，以確保你可以讀取該文件，也許路徑或文件夾名稱有問題。 ./代表你的網站的根文件夾，確保你考慮到了大寫P – MadeInDreams

您正在使用background-image財產只需要一個值，該圖像的URL，但您插入多個值。

要做你想做的事，將background-image更改爲background，這是background-image的簡寫版本，並允許您包含多個屬性值。

background-image

background

來源

2016-04-01 22:59:57 Rob

從這個CSS Trick適應的代碼，確保您使用

background（而不是background-image），並與cover屬性的大小相結合。

我加入了這個例子一個div的代碼只（你可以刪除它適用於身體，以及刪除height屬性）

假設這是你的文件夾結構

Project 
    |_ index.html 
    |_ images/ 
    |  |_water.jpg 
    |_ css/ 
     |_style.css

那麼URL應該是：url("../images/water.jpg")

div { 
 
    background: url("http://placehold.it/400x400") no-repeat center top fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    
 
    font-family: Lucida Grande, Lucida Sans, Geneva, Arial, Helvetica, sans-serif; 
 
    font-size: 100%; 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
    display: block; 
 
    height: 200px; 
 
}

<div>hello world</div>

來源

2016-04-01 23:06:27 ochi

我試過添加了它，但它仍然不能正常工作，我把所有的東西保存到同一個文件夾中，但是在那個文件夾中我有一個圖像文件夾.....可能是這個問題？ –

@AliObermayer是的，這可能是問題。嘗試改變圖像的路徑爲'。/ images/water.jpg'？ – ochi

好吧，我試過了，還有不用找了。我真的不知道問題是什麼。其他人只是說我把我的圖片文件夾放在我的css文件夾中，我想我會嘗試一下，看看會發生什麼 –

爲什麼我的背景不顯示？

回答

相關問題