有没有办法指示相对于 .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)}
最佳答案
样式表中的所有图像引用都应与 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')
.
关于javascript - CSS 包含相对于 CSS 文件位置的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30804465/