css中設定的背景圖片無法顯示的解決方案

曾經在html中編寫網頁的時候，<link rel="stylesheet" type="text/css" href="css/css.css"/> 將外部的css樣式表連結到網頁中，其它像：background-color . padding , margin 等都可以正常起作用，但就是background-image不起作用，而且有時一氣之下將background-image:url(“”絕對路徑“”) ;就可以顯示了，但是我們非常不提倡這種絕對路徑的寫法，那麼出現這個現象的原因到底是什麼呢？

注意：：在css樣式表中寫的background-image:url(圖片的路徑為相對本css檔案的路徑，而不是我們通常認為的相對加入css樣式的網頁的路徑);

例如：在目前的目錄下有 index.html 和 css檔案夾(裡麵包含：css.css) 和 images檔案夾（裡麵包含top.jpg）

錯誤的認為和寫法：background-image:url("images/top.jpg"); ----------------------------------->>錯誤的認為圖片的路徑應該是針對index.html網頁來說的。

正確的認為和寫法：background-image:url("../images/top.jpg");----------------------------------->圖片的路徑應該寫的是相對css.css檔案的路徑

其中     ../     表示的是上一級目錄，不要寫成 ./ 這是表示目前的目錄。

曾經在html中編寫網頁的時候，<link rel="stylesheet" type="text/css" href="css/css.css"/> 將外部的css樣式表連結到網頁中，其它像：background-color . padding , margin 等都可以正常起作用，但就是background-image不起作用，而且有時一氣之下將background-image:url(“”絕對路徑“”) ;就可以顯示了，但是我們非常不提倡這種絕對路徑的寫法，那麼出現這個現象的原因到底是什麼呢？

注意：：在css樣式表中寫的background-image:url(圖片的路徑為相對本css檔案的路徑，而不是我們通常認為的相對加入css樣式的網頁的路徑);

例如：在目前的目錄下有 index.html 和 css檔案夾(裡麵包含：css.css) 和 images檔案夾（裡麵包含top.jpg）

錯誤的認為和寫法：background-image:url("images/top.jpg"); ----------------------------------->>錯誤的認為圖片的路徑應該是針對index.html網頁來說的。

正確的認為和寫法：background-image:url("../images/top.jpg");----------------------------------->圖片的路徑應該寫的是相對css.css檔案的路徑

其中     ../     表示的是上一級目錄，不要寫成 ./ 這是表示目前的目錄。