CSS 函数 - url()

CSS 中的 url() 函数用于通过路径添加文件（图像或字体文件）。此函数的参数可以是 绝对 URL、相对 URL、blob URL 或 data URL。

url() 函数也可以作为参数传递给其他 CSS 函数，例如 attr() 函数。
根据 url() 所属的属性，所搜索的资源可以是图像、字体或样式表。
对于 <url> 数据类型，url() 函数表示法是其值。

相对 URL 相对于样式表的 URL，而不是网页的 URL。

url() 函数可以作为以下属性的值包含：

URI 和 URL 是不同的，其中 URI 是资源，URL 是一种描述资源位置的 URI 类型。URI 可以是 URL 或资源的名称。

可能的值

url() 函数可以具有以下值：

<string>：列出可以是 URL 或 SVG 形状 ID 的字符串。让我们在以下部分中查看每个部分

<url>

可以可选地用单引号或双引号指定相对或绝对 URL 或指向 Web 资源或数据 URL 的指针。
如果 URL 包含括号、空格或引号，则必须使用引号。
如果地址包含 0x7e 以上的控制字符，则也需要使用引号。
除非转义，否则单引号不能在单引号内使用，双引号也适用。
如果要编写不带引号的 URL，则在 URL 中包含的任何括号、空格字符、单引号和双引号之前使用反斜杠 (\)。

以下情况有效且等效

<css_property>: url("images/logo.png")
<css_property>: url('images/logo.png')
<css_property>: url(images/logo.png)

path

表示 SVG 形状的 ID。
形状可以是 circle、ellipse、line、path、polygon、polyline 或 rect。
形状的几何图形用作路径。

语法

url( <string> <url-modifier>* )

CSS url() - 使用 background-image 属性

在以下示例中，url() 函数与 background-image 属性一起使用。

<html>
<head>
<style>
   div {
      width: 200px;
      height: 200px;
      background-image: url(images/border.png);
      border: 5px inset black;
   }
</style>
</head>
<body>
   <h2>use of url() with background property</h2>
   <div></div>
</body>
</html>

CSS url() - 使用伪元素 ::before

在以下示例中，url() 函数与伪元素 ::before 一起使用，针对属性

<html>
<head>
<style>
   div {
      width: 200px;
      height: 200px;
      background-image: url(images/border.png);
      border: 5px inset black;
   }

   li::before {
      content: url(images/smiley.png);
   }
   
   li {
      padding: 5px;
   }
</style>
</head>
<body>
   <h2>use of url() with pseudo-element ::before</h2>
   <div>
      <ul>
         <li>  Item 1</li>
         <li>  Item 2</li>
      </ul>
   </div>
</body>
</html>

打印页面