CSS 函数

CSS 中的 url() 函数在通过路径添加文件（图像或字体文件）时非常有用。该函数的参数可以是绝对 URL、相对 URL、blob URL 或数据 URL。

  • 函数 url() 还可以作为参数传递给其他 CSS 函数，例如 attr() 函数。

  • 根据属性，url() 是一个值，该资源将查找的内容可以是图像、字体或样式表。

  • 对于 <url> 数据类型，url() 函数符号就是值。

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

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

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

可能的值

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

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

<url>

  • 作为相对或绝对 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。

  • 形状可以是圆形、椭圆形、直线、路径、多边形、折线、或矩形。

  • 形状的几何形状用作路径。

语法

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

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

在以下示例中，url() 函数与属性 background-image:

<html>
<head>
<style>
   div {
      width: 200px;
      height: 200px;
      background-image: url(/css/images/border.png);
      border: 5px inset black;
   }
</style>
</head>
<body>
   <h2>使用带有背景属性的 url()</h2>
   <div></div>
</body>
</html>

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

在以下示例中，url() 函数与伪元素 属性:

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

   li::before {
      content: url(/css/images/smiley.png);
   }
   
   li {
      padding: 5px;
   }
</style>
</head>
<body>
   <h2>在伪元素 ::before 中使用 url()</h2>
   <div>
      <ul>
         <li>  Item 1</li>
         <li>  Item 2</li>
      </ul>
   </div>
</body>
</html>