CSS：background-images base

Question

是否可以在CSS中輸入基本標記/聲明，就像在HTML中一樣？ 我需要一個，因爲我使用mod_rewrite和url看起來像這樣︰domain.com/path/to/something/

所以我的背景圖片不加載正確（只是索引/主頁）。我能想到的只是添加整個域（我每次更新web空間中的CSS都必須更改），但我不想這樣做。

Answer 1

如果將CSS放入樣式表中，則路徑相對於樣式表文件的位置，而不是相對於頁面。

例如，如果你有/css/global.css樣式表，並在/images/logo.gif的圖像，你會從頁面引用樣式表是這樣的：

<link rel="stylesheet" type="text/css" href="/css/global.css" /> 

（請注意，您使用的路徑相對於。根，所以也無所謂被用來請求頁面的網址是什麼）

在樣式表中，你會使用這樣的形象：

#Logo { background: url(../images/logo.gif); } 

Answer 2

如果可以的話，你應該錨你的網址，使他們成爲root relative：

例如改變：

background-image: url(images/image.png); 

要這樣：

background-image: url(/images/image.png); 

其次，即使你的CSS是設置作爲一個純粹的相對路徑，它相對於CSS文件而不是頁面（除非您將CSS嵌入到頁面中）。

Answer 3

建立一個結構是這樣的：

/index.html 
/img 
    /image1.png 
    /image2.png 
/css 
    /styles.css 

把你所有的CSS規則到外部styles.css的樣式表。

現在，CSS中，你的形象引用是相對於樣式表的位置- 這樣你就可以使用相對URL像background-image: url(../img/image1.png);

最後，請確保您的HTML代碼，您使用的絕對URL鏈接你的樣式 - 樣：

<link type="text/css" rel="stylesheet" href="/css/styles.css" /> 

使用相對URL中的CSS意味着你可以自由樣式表和背景圖片移動到不同的文件夾 - 甚至是不同的域或服務器 - 而絕對URL /css/styles.css在你的H TML LINK標籤不會受到mod_rewrite或其他任何影響您網頁在服務器上的明顯位置的影響。

Answer 4

的CSS是在一個文件中，看上去例如像這樣：

.ui-widget-content { background: black url(images/content.png) repeat-x; } 

結構：

domain.com/folderone/ 
domain.com/folderone/style/ 
domain.com/folderone/style/css/ 
domain.com/folderone/style/css/general.css 

而且對螢火蟲一看說，這是試圖加載來自：

http://domain.com/style/css/images/content.png