CSS url()函数的实例介绍

学习如何使用CSS的url()函数

当我们谈论背景图片、@import 、等等时，我们使用url() 函数来加载一个资源。

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

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

我可以往前走一级

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

或者进入一个文件夹

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

或者我可以从CSS所在的域的根部开始加载一个文件。

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

或者我可以使用一个绝对URL来加载一个外部资源。

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