blob: 12dc49ca0553bda5d211d91c5086f29eaa6c17a2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
---
title: <url>
slug: Web/CSS/url()
translation_of: Web/CSS/url()
translation_of_original: Web/CSS/url
original_slug: Web/CSS/url
---
<p>{{ CssRef() }}</p>
<h2 id="概述">概述</h2>
<p><a href="/en/CSS" title="CSS">CSS</a> 数据类型 <code><url> 指向一个资源。它没有独有的表达形式，只能通过 url() 函数定义。</code></p>
<div class="note"><strong>URI 和 URL?</strong><br>
<br>
<a class="external" href="https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E6%A0%87%E5%BF%97%E7%AC%A6" title="http://en.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a>（统一资源标识符） 与 <a class="external" href="https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E5%AE%9A%E4%BD%8D%E7%AC%A6" title="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>（统一资源定位符） 不同。URL 描述资源的位置，而 URI 描述资源的 id。URI 可以是一个资源的 URL（地址）、或 <a class="external" href="https://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E5%90%8D%E7%A7%B0">URN</a>（统一资源名称）。<br>
<br>
在 CSS Level 1 中，<code>url()</code> 函数被引入并用于描述 URL，即地址（虽然没有明确定义，但指一个 CSS 数据类型 <code><url></code>）<br>
<br>
在 CSS Level 2 中，<code>url()</code> 函数被扩展为可以描述任何一个 URI，即 URL 或 URN。这一定义导致 <code>url()</code> 函数被用于创建一个 <code><uri></code> 数据类型。这一行为使人迷惑，且在 CSS 中几乎从不使用 URN。<br>
<br>
为了解决这一问题，在 CSS Level 3 中恢复了它的初始定义， <code>url() 函数被明确定义为指代 </code><code><url></code> CSS 数据类型，且 <code><uri></code> CSS 数据类型不再存在。<br>
<br>
注意，这些语义信息并不会影响 Web 开发者的开发和对此数据类型的具体实现。</div>
<p>许多 <a href="/en/CSS_Reference" title="en/CSS_Reference">CSS 属性</a> 将 URL 作为属性值，例如 {{ Cssxref("background-image") }}、{{ Cssxref("cursor") }}、{{ Cssxref("@font-face") }}、{{ cssxref("list-style") }} 等。</p>
<h2 id="url()_函数">url() 函数</h2>
<p>URL 可以使用单引号或双引号包含，也可以直接书写。可以在此函数中使用相对地址。相对地址相对于 CSS 样式表的 URL（而不是网页的 URL）。</p>
<h2 id="语法">语法</h2>
<pre> <CSS 属性>: url("http://mysite.example.com/mycursor.png")
<CSS 属性>: url(http://mysite.example.com/mycursor.png)
</pre>
<div class="note">
<p><strong>注意:</strong> 从 Firefox 15 开始，不再允许在未用引号包含的 url() 中使用大于 0x7e 的控制字符。详情请查看<span id="summary_alias_container"><span id="short_desc_nonedit_display"> </span></span>{{Bug(752230)}}。</p>
</div>
<h2 id="示例">示例</h2>
<pre>.topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
</pre>
<pre>ul { list-style: square url(http://www.example.com/redball.png) }
</pre>
<h2 id="Specifications" name="Specifications">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Values', '#urls', '<url>') }}</td>
<td>{{ Spec2('CSS3 Values') }}</td>
<td>自 CSS Level 2 (Revision 1) 以来没有显著更改</td>
</tr>
<tr>
<td>{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>自 CSS Level 1 以来没有显著更改</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#url', '<url>') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>特性</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>基本支持</td>
<td>1.0</td>
<td>1.0 (1.0)</td>
<td>3.0</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>特性</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>基本支持</td>
<td>1.0</td>
<td>1.0 (3.5)</td>
<td>yes</td>
<td>yes</td>
<td>1.0</td>
</tr>
</tbody>
</table>
</div>
|
