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
/* 简单用法 */
url(https://example.com/images/myImg.jpg);
url(data:image/png;base64,iRxVB0…);
url(myFont.woff);
url(#IDofSVGpath);

/* 相关属性 */
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");

/* 带回退的属性 */
cursor: url(pointer.cur), pointer;

/* 相关的简写属性 */
background: url('star.gif') bottom right repeat-x blue;
border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;

/* 作为另一个 CSS 函数的参数 */
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));

/* 作为非简写多重数值的一部分 */
content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);

/* at 规则 */
@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 的值，作为 @font-face 块的一部分的 src，以及 @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 中的任何括号、空白字符、单引号（'）和双引号（"）前使用反斜线（\）。

      path

      引用 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);
}

内容属性中的用法

HTML

html
<ul>
  <li>第 1 项</li>
  <li>第 2 项</li>
  <li>第 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. SVG 文件的路径，并附加滤镜的 ID。
  2. 如果页面上已经存在 SVG，则为滤镜的 ID。
css
.blur {
  filter: url(my-file.svg#svg-blur); /* 作为滤镜使用的 SVG 文件的 URL */
}

.inline-blur {
  filter: url(#svg-blur); /* 嵌入到 HTML 页面中的 SVG 的 ID */
}

规范

Specification
CSS Values and Units Module Level 4
# urls

浏览器兼容性

BCD tables only load in the browser

参见