在此页

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

<url> CSS data type denotes a pointer to a resource, such as an image or a font. URLs can be used in numerous CSS properties, such as background-image , cursor ，和 list-style .

URI or URL? There is a difference between a URI 和 URL . A URI simply identifies a resource. A URL is a type of URI, and describes the location of a resource. A URI can be either a URL or a name ( URN ) of a resource.

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, whether a URL or a URN. Confusingly, this meant that url() could be used to create a <uri> CSS data type. This change was not only awkward but, debatably, unnecessary, since URNs are almost never used in actual CSS. To alleviate the confusion, CSS Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url> s.

句法

<url> data type is specified using the url() functional notation. It may be written without quotes, or surrounded by single or double quotes. Relative URLs are allowed, and are relative to the URL of the stylesheet (not to the URL of the web page).

If you choose to write the URL without quotes, use a backslash (\) before any parentheses, whitespace characters, single quotes (') and double quotes (") that are part of the URL.

<a_css_property>: url("http://mysite.example.com/mycursor.png")
<a_css_property>: url('http://mysite.example.com/mycursor.png')
<a_css_property>: url(http://mysite.example.com/mycursor.png)
					

范例

A url used in the backgroun property

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

A url loading an image as a list bullet

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

规范

规范	状态	注释
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

图例

完整支持

完整支持

另请参阅

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

元数据

• 最后修改： Oct 12, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS Types
4. 特性

   1. <angle-percentage>
   2. <angle>
   3. <basic-shape>
   4. <blend-mode>
   5. <custom-ident>
   6. <dimension>
   7. <frequency-percentage>
   8. <frequency>
   9. <gradient>
   10. <image>
   11. <integer>
   12. <length-percentage>
   13. <length>
   14. <number>
   15. <percentage>
   16. <ratio>
   17. <resolution>
   18. <shape>
   19. <string>
   20. <time-percentage>
   21. <time>
   22. <transform-function>
   23. <url>
   24. color
   25. flex
   26. ident
   27. position