CSS url（）

When we talk about background images, @import, and more, we use the url() function to load a resource:

当我们谈论背景图像，@ @import等时，我们使用url()函数加载资源：

div {
  background-image: url(test.png);
}

In this case I used a relative URL, which searches the file in the folder where the CSS file is defined.

在这种情况下，我使用了一个相对URL，它在定义CSS文件的文件夹中搜索文件。

I could go one level back

我可以再上一层

div {
  background-image: url(../test.png);
}

or go into a folder

或进入文件夹

div {
  background-image: url(subfolder/test.png);
}

Or I could load a file starting from the root of the domain where the CSS is hosted:

或者，我可以从托管CSS的域的根目录开始加载文件：

div {
  background-image: url(/test.png);
}

Or I could use an absolute URL to load an external resource:

或者，我可以使用绝对URL加载外部资源：

div {
  background-image: url(https://mysite.com/test.png);
}

翻译自: https://flaviocopes.com/css-url/