在CSS文件中使用相對URL，它相對於哪個位置？

Question

在CSS文件中定義類似背景圖片的URL時，使用相對URL時，它與哪個相對？例如：

假設該文件包含/stylesheets/base-styles.css：

div#header { 
    background-image: url('images/header-background.jpg'); 
} 

如果我有這個樣式表到不同的文件通過<link ... />將在CSS文件的相對URL是相對於樣式表文件在/stylesheets/或相對於當前文件它包含在內？可能的路徑，如：

/item/details.html 
/about/index.html 
/about/extra/other.html 
/index.html 

Answer 1

根據W3：

完整的URL相對於樣式表的源解釋，而不是相對於文檔

因此，在回答你的問題時，它將相對於/stylesheets/。

如果您考慮這一點，這是有道理的，因爲CSS文件可以添加到不同目錄中的頁面，因此將其標準化爲CSS文件意味着URL可以在樣式錶鏈接的任何位置使用。

Answer 2

這是相對的CSS文件。

Answer 3

For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

（別的將被打破，IMNSHO）

Answer 4

爲了創建不依賴於資源絕對位置的模塊化樣式表，作者可以使用相對URI。相對URI（如[RFC3986]中定義）使用基本URI解析爲完整URI。 RFC 3986第5節定義了這個過程的規範算法。對於CSS樣式表，基本URI是樣式表的基礎URI，而不是源文檔的URI。

例如，假定下面的規則：

body { background: url("yellow") } 

位於由URI所指定的樣式表：

http://www.example.org/style/basic.css 

源文檔的身體的背景將與任何圖像平鋪通過由URI

http://www.example.org/style/yellow 

用戶代理指定的資源描述可以在處理指定不可用或不適用資源的無效URI或URI方面有所不同。

取自CSS 2.1 spec。

Answer 5

這是相對於樣式表，但我建議你做相對於你的URL網址：

div#header { 
    background-image: url(/images/header-background.jpg); 
} 

這樣的話，你可以四處移動你的文件，而無需重構他們的未來。使用CSS的自動最小化時可能發生的，而且似乎打破了這種

Answer 6

的一個問題是。縮小束的請求路徑可以具有與原始CSS不同的路徑。這可能會自動發生，因此可能會導致混淆。

用於精縮束映射的請求路徑應該是「/ originalcssfolder/minifiedbundlename」不只是「minifiedbundlename」。

換句話說，命名您的包有相同的路徑（使用/）作爲原始文件夾結構，這樣像字體的任何外部資源，將圖像映射瀏覽器來糾正的URI。另一種方法是在你的CSS使用絕對URL（參但通常不希望

Answer 7

嘗試使用：。

body { 
    background-attachment: fixed; 
    background-image: url(./Images/bg4.jpg); 
} 

Images是文件夾抱着要發佈的圖片