url

<url> CSS数据类型表示一个指针指向资源（例如图像或字体）的指针。它没有合适的语法，只能通过url()函数符号来表达。URLs被众多的CSS属性所使用，比如background-image，cursor，@font-face，和list-style。

URI还是URL？URI和URL之间是有区别的。一个URI只是标识一个资源。URL是一种URI，描述资源的位置。URI可以是资源的URL或名称（URN）。

在CSS Level1中，url()函数符号仅用来描述真实的URLs。

在CSS Level2中，url()的定义扩展为描述任何URI，无论是URL还是URN。但令人困惑的是，这意味着url()可以用来创建一个<uri>CSS数据类型。这种变化不仅是尴尬的，而且还是有争议的，不必要的，因为URN在实际的CSS中几乎从不使用。

为了减少混淆，CSS Level 3回到了更狭义的初始定义。现在，url()只表示真实的<url>。

语法

URL使用url()函数符号表示。它可能没有引号，或用单引号或双引号括起来。相对URL是允许的，但它只能是相对于样式表的URL（而不是网页的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)

注：从Firefox 15开始，在未引号的URL中不允许在0x7e以上的控制字符。见虫752230更多细节。

实例

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

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

规范

Specification	Status	Comment
CSS Values and Units Module Level 3The definition of '<url>' in that specification.	Candidate Recommendation	No significant change from CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1)The definition of '<uri>' in that specification.	Recommendation	No significant change from CSS Level 1.
CSS Level 1The definition of '<url>' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	1.0	1.0 (1.0)	3.0	3.5	1.0 (85)

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	1.0 (3.5)	yes	yes	1.0

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18