背景圖片不能在css中工作

Question

我的背景圖片無法在我的網站上加載。我檢查了谷歌瀏覽器中的檢查選項，它告訴我，我給出的路徑是錯誤的。我把圖像放在css文件夾中，檢查它是否能夠正常工作，但是沒有。我把它放回圖像文件夾，並試圖：

#background1{ 
background: url(../../images/rusteberg.jpeg); 
     } 

這也沒有工作。我在這裏都沒有選擇。

Answer 1

作爲網站上「無效路徑」問題的一般解決方案，您應該對所有站點本地URL使用基本路徑（前斜槓/）。

所以你的CSS規則變爲：

#background1{ 
    background: url('/images/rusteberg.jpeg'); 
     } 

凡我所作出的假設，你images文件夾是你的網站地址的直接孩子這麼：http://www.yourwebsite.org.uk/images/rusteberg.jpeg會是你想要的圖像的工作瀏覽器網址顯示。

這意味着CSS文件的位置無關緊要，因爲圖像總是被找到，因爲資源位置現在是而不是相對到CSS位置。

Answer 2

這個問題的一個好方法是使用谷歌瀏覽器（或任何其他您的偏好，雖然我真的推薦GC）督察，使用Ctrl+Shift+I。

然後右鍵點擊你的<div>和右側，檢查

background: url('../../image.jpg'); 

清晰度，以獲得相關圖像URL，它沒有一個正確的URL的形象。

單擊該鏈接並讓瀏覽器嘗試打開它。還有，你可能在你的瀏覽器地址欄中喜歡的網址：

http://example.com/path///image.jpg 

有可能會與你的關於圖像的相對路徑圖像的比較給定的URL。