如何将多个图像放在外部CSS中

Question

道歉，如果这已经得到解答，但我无法在这里或网络上找到它。

是否可以将多个图像放在外部css文件中？我有背景，它显示正确。我无法显示其他图像，因为我不确定使用哪些标签（html不在外部CSS中工作）

Answer 1

在CSS中引用外部图像的方式如下：

#foo{ background-image: url(path/to/image.jpg); }

#bar{ background-image: url(path/to/anotherimage.jpg); }

正如您所见，abovve，任何元素都可以根据CSS声明引用图像。

请注意，您在CSS文件中引用的路径是相对于CSS文件位置而不是HTML。例如，如果您的目录结构如下所示：

index.html
/img
    - banner.jpg
    - logo.png
/css
    - styles.css

将横幅添加到CSS文件中的给定#foo元素将如下所示：

#foo{ background-image: url(../img/banner.jpg) }

注意../ - 转换为“上一个目录”。