url()
url() CSS 函数用于包含文件。其参数可以是绝对 URL、相对 URL、Blob URL 或数据 URL。url() 函数可以作为另一个 CSS 函数（如 attr() 函数）的参数传递。根据它作为值的属性，所寻求的资源可以是图像、字体或样式表。url() 函数式表示法是 <url> 数据类型的值。
注意： URI 和 URL 之间存在差异。URI 标识资源。URL 是一种 URI，描述资源的位置。URI 既可以是 URL，也可以是资源的名称 (URN)。
在 CSS Level 1 中，url() 函数式表示法只描述真正的 URL。在 CSS Level 2 中，url() 的定义被扩展为描述任何 URI，无论是 URL 还是 URN。令人困惑的是，这意味着 url() 可以用来创建 <uri> CSS 数据类型。这一变化不仅笨拙，而且可以说是没有必要的，因为 URN 在实际 CSS 中几乎从未使用过。为了消除这种混淆，CSS Level 3 回到了更窄的初始定义。现在，url() 只表示真正的 <url>。
相对 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 的值。
语法
/* Basic usage */
url("https://example.com/images/myImg.jpg");
url('https://example.com/images/myImg.jpg');
url(https://example.com/images/myImg.jpg);
url("data:image/jpeg;base64,iRxVB0…");
url(myImg.jpg);
url(#IDofSVGpath);
/* associated properties */
background-image: url("star.gif");
list-style-image: url('../images/bullet.jpg');
content: url("my-icon.jpg");
cursor: url(my-cursor.cur);
border-image-source: url(/media/diamonds.png);
src: url('fantastic-font.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(black, 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);
值
<string>-
一个字符串，指定一个 URL，它可以是相对或绝对地址，或者指向要包含的 Web 资源的指针，也可以是数据 URL。您还可以使用哈希 URL 来引用 SVG 形状或 SVG 滤镜的 ID。
引号通常是可选的——如果 URL 包含括号、空格或引号（除非这些字符已转义），或者如果地址包含 0x7e 以上的控制字符，则需要引号。应用正常的字符串语法规则：双引号不能出现在双引号内部，单引号不能出现在单引号内部，除非它们被转义。
<url-modifier>-
将来，
url()函数可能支持指定修饰符、标识符或函数式表示法，以改变 URL 字符串的含义。这在规范中不受支持，也未完全定义。
正式语法
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
示例
作为 background 属性值
body {
background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")
#0000dd no-repeat fixed;
}
用于将图像设置为列表项目符号
ul {
list-style: outside
url("https://mdn.github.io/shared-assets/images/examples/firefox-logo.svg");
}
在 content 属性中的用法
HTML
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS
li::after {
content: " - "
url("https://mdn.github.io/shared-assets/images/examples/star-white_16x16.png");
}
结果
使用数据 URL
CSS
body {
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 必须是以下之一
- SVG 文件的路径，附加滤镜的 ID。
- 滤镜的 ID，如果 SVG 已存在于页面上。
.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 |
浏览器兼容性
加载中…