javascript - CSS 包含相对于 CSS 文件位置的图像

Question

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

我有一张 CSS 样式的图片:

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

我想在位于同一目录(我将其包含为“mycss.css”)和子目录(我将此文件包含为“../mycss.css”)的 HTML 页面中使用相同的 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)}

Answer 1

样式表中的所有图像引用都应与 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

根据上面的示例，所有引用 style.css 中的 img 目录的图像都将是 url('../img/*.jpg').