2

有人可以帮助解释背景图像的 CSS URL 是如何工作的吗？CSS 究竟是如何知道从哪里开始查找 URL 的？例如我有这 3 个网址

#web_content{ background: URL(images/background.jpg); }
#web_content{ background: URL(/images/background.jpg); }
#web_content{ background: URL(localhost:1234/newWebSite/images/background.jpg); }

我在不同的 PC 上尝试了所有这 3 个。使用相同版本和所有内容的相同 Web 浏览器。基本上所有不同的是它运行的PC。使用第一个示例，它仅显示在一台 PC 上，第二个示例显示在 2 台 PC 上，第三个示例显示在所有 PC 上……但在现实生活中使用它作为 URL 是行不通的。有人可以详细解释 URL 是如何找到文件的吗？

4

2 回答 2

12

第一个说在CSS文件所在的同一目录中寻找一个image文件夹，然后指出该background.jpg文件。

第二个说进入root文件夹然后查找image文件夹，然后查找名为background.jpg.

第三个说去一个domain然后查看newWebSite文件夹然后在一个image文件夹中然后指出文件background.jpg。

使用什么 URL 以及何时使用完全取决于目录的结构。如果您的CSS和Image文件夹在同一目录中，那么您可以这样编写 URL：

background-image: url(../images/background.jpg);

这里../将告诉 CSS 文件返回一个目录，然后进入该image文件夹。

如果你的image文件夹是文件夹的子目录，css那么你可以这样写：

background-image: url(images/background.jpg);

如果你想包含来自另一个网站的文件，那么你可以这样写：

background-image: url(http://www.example.com/background.jpg);

如果你想在你网站的根目录中找到一个文件夹，那么你可以这样写：

background-image: url(/images/background.jpg);

这里/的第一个表示进入第一个父目录然后查找image文件夹的 URL。

于 2013-07-23T11:38:18.417 回答
0

你没有给我们足够的信息来直接回答这个问题，所以我能想到的最好的回答方式是向你展示如何为自己找到解决方案。

在任何现代 Web 浏览器中，您都可以按 F12 来调出开发工具窗口。在此窗口打开的情况下加载页面。

根据您使用的浏览器，确切的开发工具功能会有所不同，但它们都提供了查看浏览器内发生的网络流量的能力。这将位于开发工具中的标签页上。

找到该网络流量选项卡，您将看到正在加载的页面条目，以及所有 CSS、JS、图像和其他资源的条目。

这将向您显示浏览器尝试加载的确切 URL。它还将向您显示发生的任何错误（例如 404 Not found 错误）。

使用它，您应该能够计算出浏览器在您描述的每个实例中查找文件的位置，并且从那里可以很明显地看出它们的不同之处以及为什么它在某些情况下而不是其他情况下工作。

我希望这会有所帮助。

于 2013-07-23T11:40:51.030 回答