1. 首页
  2. CSS 菜鸟教程
  3. CSS 函数 - url()

CSS 函数 - url()

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 的 ID。让我们在以下各节中看到其中的每一个：

<URL>

  • 如果 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)

路径

  • 表示 SVG 形状的 ID。
  • 形状可以是圆形、椭圆、直线、路径、多边形、折线或矩形。
  • 形状的几何图形用作路径。

语法


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>
<< CSS 函数 - var() CSS 函数 - env() >>