url()

url() CSS 函数 用于包含文件。参数可以是绝对 URL、相对 URL、Blob URL 或数据 URL。url() 函数可以作为其他 CSS 函数的参数传递，例如 attr() 函数。根据其作为值的属性，所查找的资源可以是图像、字体或样式表。url() 函数表示法是 <url> 数据类型的值。

注意：URI 和 URL 之间存在区别。URI 标识资源。URL 是一种 URI，描述资源的位置。URI 可以是 URL 或资源的名称（URN）。

在 CSS 级别 1 中，url() 函数表示法仅描述了真正的 URL。在 CSS 级别 2 中，url() 的定义扩展到描述任何 URI，无论是 URL 还是 URN。令人困惑的是，这意味着 url() 可用于创建 <uri> CSS 数据类型。这种更改不仅很笨拙，而且可以说是不必要的，因为 URN 在实际的 CSS 中几乎从未使用过。为了缓解这种混乱，CSS 级别 3 回到了更窄的初始定义。现在，url() 仅表示真正的 <url>。

css
/* Simple usage */
url(https://example.com/images/myImg.jpg);
url(data:image/png;base64,iRxVB0…);
url(myFont.woff);
url(#IDofSVGpath);

/* associated properties */
background-image: url("star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("pdficon.jpg");
cursor: url(mycursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantasticfont.woff');
offset-path: url(#path);
mask-image: url("masks.svg#mask1");

/* Properties with fallbacks */
cursor: url(pointer.cur), pointer;

/* Associated short-hand properties */
background: url('star.gif') bottom right repeat-x blue;
border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;

/* As a parameter in another CSS function */
background-image: cross-fade(20% url(first.png), url(second.png));
mask-image: image(url(mask.png), skyblue, linear-gradient(rgb(0 0 0 / 100%), transparent));

/* as part of a non-shorthand multiple value */
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);

/* at-rules */
@document url("https://www.example.com/") { /* … */ }
@import url("https://www.example.com/style.css");
@namespace url(http://www.w3.org/1999/xhtml);

如果使用相对 URL，则它们相对于样式表的 URL（而不是网页的 URL）。

url() 函数可以作为以下属性的值：background、background-image、border、border-image、border-image-source、content、cursor、filter、list-style、list-style-image、mask、mask-image、offset-path、clip-path、src（作为 @font-face 块的一部分）以及 @counter-style/symbol。

语法

值

<string>

可以指定 URL 或 SVG 形状 ID 的字符串。

<url>

一个 URL，可以是相对地址或绝对地址，或者指向要包含的 Web 资源的指针，或者是一个数据 URL，可以选择用单引号或双引号括起来。如果 URL 包含括号、空格或引号，则需要使用引号，除非这些字符已转义，或者地址包含大于 0x7e 的控制字符。双引号内不能出现双引号，单引号内不能出现单引号，除非已转义。以下都是有效且等价的。

css
<css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)

如果选择不使用引号编写 URL，请在 URL 中包含的任何括号、空格字符、单引号 (') 和双引号 (") 前使用反斜杠 (\) 进行转义。

路径

引用 SVG 形状（circle、ellipse、line、path、polygon、polyline 或 rect）的 ID，使用形状的几何图形作为路径。

<url-modifier>

将来，url() 函数可能会支持指定一个修改符、一个标识符或一个函数表示法，从而改变 URL 字符串的含义。规范中尚不支持且未完全定义。

正式语法

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

示例

在 background 属性中使用的 url

css
.topbanner {
  background: url("topbanner.png") #00d no-repeat fixed;
}

加载图像作为列表项目符号的 url

css
ul {
  list-style: square url(http://www.example.com/redball.png);
}

在 content 属性中的用法

HTML

html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

css
li::after {
  content: " - " url(star.gif);
}

结果

使用数据 URL

HTML

html
<div class="background"></div>

CSS

css
.background {
  background: yellow;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
}

在过滤器中的用法

当 URL 用作过滤器的路径时，URL 必须是以下之一：

  1. 带有附加过滤器 ID 的 SVG 文件的路径。
  2. 过滤器的 ID，如果 SVG 已存在于页面上。
css
.blur {
  filter: url(my-file.svg#svg-blur); /* the URL of an SVG file used as a filter */
}

.inline-blur {
  filter: url(#svg-blur); /* the ID of an SVG that is embedded in the HTML page */
}

规范

规范
CSS 值和单位模块级别 4
# urls

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅