是否可以从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图像作为background.png，它位于相关index.html的同一目录中。

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

Answer 1

这在外部样式表中是不可能的。图片网址与样式表网址相关，而不是文档网址。

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

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

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

或者，您可以在css中指定所有文档的背景，并向文档添加类。例如，您可以将文档标题作为一个类添加到正文中，并根据该样式创建样式，这样就可以得到类似

的内容。

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

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