在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The url() function can be passed as a parameter of another CSS functions, like the attr() function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.

/* 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("https://mdn.mozillademos.org/files/16761/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('https://mdn.mozillademos.org/files/16761/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(rgba(0, 0, 0, 1.0), 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);
					

Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).

url() function can be included as a value for background , background-image , list-style , list-style-image , content , cursor , border , border-image , border-image-source , mask , mask-image , src as part of a @font-face block, and @counter-style/symbol

In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, including URNs. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url> s.

句法

值

<string>

<url>

A url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent:

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

path

References the ID of an SVG shape -- circle , ellipse , line , path , polygon , polyline ，或 rect -- using the shape's geometry as the path.

<url-modifier>

In the future, the url() function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string.This is not supported and not fully defined in the specification.

形式句法

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

范例

content property

HTML

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

CSS

li::after {
  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
}
								

结果

data-uri

HTML

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

CSS

.background {
  height: 100vh;
}
								

.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");
}
								

规范

规范	状态	注释
CSS Values and Units Module Level 4 The definition of 'url()' in that specification.	编者草案
CSS Values and Units Module Level 3 The definition of 'url()' in that specification.	候选推荐	No significant change from CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1) The definition of 'uri()' in that specification.	推荐	No significant change from CSS Level 1.
CSS Level 1 The definition of 'url()' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
<url>	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 3	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 1	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

另请参阅

• <gradient>
• element()
• image()
• image-set()
• cross-fade()

元数据

• 最后修改： Oct 29, 2020

相关话题

1. CSS
2. CSS 参考