CSS包含相對於CSS文件位置的圖像

有沒有辦法指出相對於.css文件位置的圖像路徑？CSS包含相對於CSS文件位置的圖像

我有一個CSS樣式的圖像：

a[href $= '.pdf']:before {content:url(img/pdf.gif)}

我想用在位於同一目錄的HTML網頁相同的CSS文件（我把它作爲「mycss.css」）和子-directories（我將這個文件包含爲「../mycss.css」）。

在後一種情況下，顯然沒有找到圖像。

編輯：圖像被發現，所以問題的其餘部分是沒有意義的。

我不想使用絕對路徑，因爲不同的URL相同的網站在不同層次顯示，由於mysite.example.com，如example.com/mysite，並作爲example.com/mycompany/mysite。

有沒有辦法指出相對於.css文件位置的圖像路徑？

或者，有條件地包含圖像取決於哪些存在（不會混淆瀏覽器與不存在的文件）。例如，它可能是

a[href $= '.pdf']:before {content:url(img/pdf.gif) url(../img/pdf.gif)}

使兩者中的一個將被顯示，但該瀏覽器可能顯示一個佔位符，其中不存在的文件是如此。所以也許它可能是這樣的

if exists img/pdf.gif 
    a[href $= '.pdf']:before {content:url(img/pdf.gif)} 
else 
    a[href $= '.pdf']:before {content:url(../img/pdf.gif)}

來源

2015-06-12 Alexander Gelbukh

樣式表中的所有圖像引用應該是相對的CSS文件。 – hungerstar

所有圖片樣式表中的引用應該與CSS文件相關。

index.html 
css/style.css 
js/script.js 
img/img-1.jpg 
    img-2.jpg 
    img-3.jpg 
about/index.html 
contact/index.html

每引用img目錄中style.css所有圖像上面的例子是url('../img/*.jpg')。

來源

2015-06-12 13:39:36 hungerstar

請確保您正確調用CSS文件。使用固定的絕對路徑：

http://static.example.com/css/style.css

並在CSS文件，圖像路徑相對給CSS：

background: url("../img/pic.png");

這適用，如果您有：

+ site 
|--+ css 
| |-- styles.css 
| |-- plugin.css 
|--+ img 
| |-- graphic.png 
| |-- img.png

來源

2015-06-12 13:39:34

包含絕對路徑的文件確實不是必需的。 –

嘗試使用你的服務器端代碼生成的飛行參數的CSS

Example: <link rel="stylesheet" type="text/css" href="../mycssservlet?mypathlevel=2"> 
should generate the CSS on the fly with ../../img/myimg.png 
which is 2 time parent relative path 
provided the server side program uses the proper content type

否則使用條件CSS一樣都不能少或SASS

來源

2015-06-12 13:44:15

CSS包含相對於CSS文件位置的圖像

回答

相關問題