CSS包括相对于CSS文件位置的图像

Question

有没有办法指示相对于.css文件位置的图像路径？

我有一个CSS风格的图像：

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

我想在位于同一目录中的HTML页面中使用相同的CSS文件（我将其包含为＆＃34; mycss.css＆＃34;）和子目录（我将此文件包含为＆＃34; ../mycss.css"）。

在后一种情况下，显然没有找到图像。

编辑：找到图像，所以问题的其余部分没有任何意义。

我不想使用绝对路径，因为对于不同的网址，同一网站会在不同级别显示，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)}

Answer 1

尝试使用服务器端代码

动态生成带参数的CSS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

否则使用条件CSS，如LESS或SASS

Answer 2

样式表中的所有图像引用都应该与CSS文件相关。

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

根据上面的示例，引用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。

Answer 3

确保正确调用CSS文件。使用固定的绝对路径：

score_list = sorted(player_scores.items(), key=lambda item: max(item[1]))

在CSS文件中，提供相对于CSS的图像路径：

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

如果您有：

，则适用

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