為什么此CSS不會產生背景圖像？

Question

body{    
background:#fff url('images/testProfile.jpg') no-repeat right top;
}

我認為這段代碼應該可以工作，因此請建議有用的調試步驟...例如如何以極端的方式調整圖像屬性和位置...

Answer 1

請記住，CSS中的url（）是相對於樣式表而不是頁面的。 這可能是一個問題。

Answer 2

最有可能是因為找不到圖片。 查看通過良好瀏覽器（如Chrome，Safari或Firefox + firebug）的開發工具加載的圖像。 您應該能夠看到它嘗試加載的圖像以及它們的服務器響應。 如果是404，則表示圖像路徑錯誤。

請記住，圖像URL總是相對於樣式表的位置，而不是頁面本身。 因此，相對路徑可能與您想象的不同。

---

調試實例

本頁： http ： //jsfiddle.net/qUfn9/

使用CSS： body { background: url('foo.png') }

使chrome開發工具這樣說：

Answer 3

嘗試為URL使用絕對路徑

body{    
background:#fff url('/images/testProfile.jpg') no-repeat right top;
}