有一種方法可以爲css中使用的圖像設置默認目錄？

我有一個css文件，爲了組織起見，它位於圖像所在的另一個目錄中。事情是我總是最終設置像這樣的所有背景圖像：background-image: url(../img/Untitled.jpg)。有什麼像HTML的<base>標籤，可以在CSS中使用，所以我不需要把這個「../img/」到每一個background-image？有一種方法可以爲css中使用的圖像設置默認目錄？

來源

2011-04-28 SPL_Splinter

另一個可能選項將使用php或其他服務器端語言創建您的css樣式。然後你可以使用一個目錄變量來爲每個項目吐出完整的路徑。

styles.php

<?php 
    header("Content-Type: text/css"); 
    $imageDir='../images'; 
    // or 
    // $imageDir='/newsletter/2010/jan/17/business/category/7/img'; 
?> 

.divClass{ 
    background : url('<?php echo $imageDir; ?>/kitten.jpg'); 
}

來源

2011-04-28 20:46:41 Dutchie432

不，恐怕你被這種語法卡住了。

編輯：你可能想看看http://lesscss.org/。通過變量，您至少可以定義頂部的所有網址。

來源

2011-04-28 20:42:09

這種伴隨我的答案。如果OP使用的是能夠生成CSS的服務器端語言（例如PHP），那麼我認爲最好減少包含的庫。如果不是，這將是首選！ +1 – Dutchie432 2011-04-28 20:49:36

感謝您的回答。我現在不會使用它，因爲我已經使用了許多庫，但是我會將它保存在一個安全的地方，因爲這是一個很棒的圖書館！ – 2011-04-28 21:00:31

除非css與圖像位於同一目錄，否則沒有真正的解決方案。

但你是不是這樣的問題說，所以唯一的辦法，以顯示其中的圖像是給相對位置爲每background-image或靜態圖像（與http://...）

來源

2011-04-28 20:42:16 Neal

一件事你可以做的不是用相對路徑進行修改，你總是可以從域根下來。這個URL看起來更像url(/img/Untitled.jpg)，並且它將在所有CSS文件中都是相同的，無論它們在域下嵌套的深度如何。

來源

2011-04-28 20:46:16 cdeszaq

這假定使用根作爲起點會更容易。 '../ img/test.jpg'的絕對路徑可能類似於'/ newsletter/2010/jan/17/business/category/7/img/test.jpg' – Dutchie432 2011-04-28 20:53:45

@ Dutchie432 - 嗯，是的，我看到了現在我正在回答一個沒有被問到的問題:) – cdeszaq 2011-04-28 20:55:22

URL重寫這裏是你的朋友。

CSS圖像引用總是相對於CSS文件的URL。假設我們的CSS文件存在於/css之內，並且我們希望我們的圖像資源位於/img之內，並且我們已經厭倦了將../img/放在每個圖像參考之前。

所有相關的CSS圖像引用都相對於包含引用的css文件的URL。設置URL重寫規則重寫URL這樣的

/css/foobar.png
/css/blue-theme/header-background.png

使它們相對於所需位置（/img）：

/img/foobar.png
/img/blue-theme/header-background.png

Et瞧！問題解決了。

你可以用Apache的mod_rewrite做到這一點。應該像將以下內容添加到適當的.htaccess一樣簡單。

Options +FollowSymlinks 
RewriteEngine On 
RewriteRule ^css/(([^/]+/)*)([^/\.]+\.(gif|jpg|jpeg|png))$ img/$1$3

在IIS上更困難，但概念保持不變。

來源

2011-04-28 21:30:53

有一種方法可以爲css中使用的圖像設置默認目錄？

回答

相關問題