CSS背景URL

Question

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

#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台电脑和所有他们的第三人关心...但使用的网址将不工作当然,在现实生活中.有人可以详细解释URL如何找到该文件？

Answer 1

第一个说要image在CSS文件所在的同一目录中查找文件夹,然后指出该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);

将/在第一次在这里表示URL进入了第一个父目录,然后寻找一个image文件夹.