Question

有人可以帮助解释背景图片的CSS网址是如何工作的吗？ 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上尝试了所有这三种。使用相同版本和所有内容的相同Web浏览器。基本上所有不同的是它运行的PC。使用第一个例子，它只显示在一台PC上，第二个例子显示在2台PC上，第三个显示所有这些...但当然在现实生活中使用它，因为URL不起作用。有人可以详细解释URL如何找到文件吗？

Answer 1

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

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

第三个说要转到domain，然后查看newWebSite文件夹，然后在image文件夹中，然后指出文件background.jpg。

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

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。

Answer 2

您没有向我们提供足够的信息来直接回答问题，因此我能想到的最佳方式是向您展示如何为自己找到解决方案。

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

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

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

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

使用它，您应该能够找出浏览器在您描述的每个实例中查找文件的位置，并且从那里它们如何区别以及它在某些情况下工作的原因应该是相当明显的而不是其他

我希望有所帮助。

CSS背景URL

2 个答案: