html - 是否可以从 CSS 引用 HTML 文件夹中的图像？

Question

我知道引用图像时的 CSS 相对路径是相对于 CSS 文件本身的。我想引用 HTML 文件夹中的图像，这样尽管图像始终具有相同的名称，但访问的每个目录都会有不同的图像。

我有一个类似这样的目录结构:

book/
-index.html
-style.css
-chapter1/
--background.png
--index.html
-chapter2/
--index.html
--background.png

我希望 style.css 引用每个 index.html 的 background.png 图像作为相关 index.html 同一目录中的 background.png。

这可能吗？如果是这样，我该怎么做。

Answer 1

这在外部样式表中是不可能的。图片 url 是相对于样式表 url，而不是文档 url。

您可以通过将 CSS 添加到文档本身来解决此问题。您不需要文档中的整个 CSS，但您可以只在文档中添加背景图片:

<style>.yourclass{ background-image: url('background.png'); }</style>

这不是很好，但我认为这是目前最好的解决方案。

或者，您可以在 css 中为所有文档指定背景，并向文档添加一个类。例如，您可以将文档标题作为一个类添加到正文中，并以此为基础来设置您的样式，这样您就会得到类似于

body.chapter-1 .yourclass{ background-image: url('../chapter1/background.png'); }

当然，缺点是您必须了解文档并将每个文档添加到样式表中。因此，这取决于您的情况，哪种效果最好。如果您希望您的章节从一定数量的样式中进行选择，那么添加一个类将是最好的选择。如果每个文档都应该有自己的背景，我认为将其嵌入文档本身是最好的选择，否则您的样式表将包含您完整的网站索引，并且每次添加新内容时都必须更改。