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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
---
title: url()
slug: Web/CSS/url()
translation_of: Web/CSS/url()
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary">The <code><strong>url()</strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The <code><strong>url()</strong></code> function can be passed as a parameter of another CSS functions, like the {{cssxref('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.</span></p>
<pre class="brush: css no-line-numbers">/* 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/") { ... } {{Experimental_Inline}}
@import url("https://www.example.com/style.css");
@namespace url(http://www.w3.org/1999/xhtml);
</pre>
<p>Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).</p>
<p class="task-list-item">The <code><strong>url()</strong></code> function can be included as a value for {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, <a href="/en-US/docs/Web/CSS/@font-face/src">src</a> as part of a <a href="/en-US/docs/Web/CSS/@font-face">@font-face</a> block, and <a href="/en-US/docs/Web/CSS/@counter-style/symbols">@counter-style/symbol</a></p>
<p>In CSS Level 1, the <code>url()</code> functional notation described only true URLs. In CSS Level 2, the definition of <code>url()</code> was extended to describe any URI, including URNs. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, <code>url()</code> denotes only true <code><url></code>s.</p>
<h2 id="Syntax">Syntax</h2>
<h3 id="Values">Values</h3>
<dl>
<dt><code><string></code></dt>
<dd>
<dl>
<dt><url></dt>
<dd>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:
<pre class="syntaxbox"><css_property>: url("https://example.com/image.png")
<css_property>: url('https://example.com/image.png')
<css_property>: url(https://example.com/image.png)</pre>
</dd>
<dt>path</dt>
<dd>References the ID of an <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">SVG shape</a> -- <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>path</code>, <code>polygon</code>, <code>polyline</code>, or <code>rect</code> -- using the shape's geometry as the path.</dd>
</dl>
</dd>
<dt><code style="white-space: nowrap;"><url-modifier></code> {{Experimental_Inline}}</dt>
<dd>In the future, the <code>url()</code> 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.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">url( <a href="/en-US/docs/Web/CSS/string"><string></a> <url-modifier>* )</pre>
<h2 id="Examples">Examples</h2>
<h3 id="content_property">content property</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css highlight[2]">li::after {
content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
}</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p>
<h3 id="data-uri">data-uri</h3>
<div id="color-value">
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div class="background"></div></pre>
<h4 id="CSS_2">CSS</h4>
<div class="hidden">
<pre class="brush: css">.background {
height: 100vh;
}</pre>
</div>
<pre class="brush: css highlight[6]">.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");
}</pre>
</div>
<p>{{EmbedLiveSample("data-uri", "100%", 50)}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Values', '#urls', 'url()')}}</td>
<td>{{Spec2('CSS4 Values')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Values', '#urls', 'url()')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>No significant change from CSS Level 2 (Revision 1).</td>
</tr>
<tr>
<td>{{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No significant change from CSS Level 1.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#url', 'url()')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>{{Compat}}</div>
<h2 id="See_also">See also</h2>
<ul>
<li>{{cssxref("<gradient>")}}</li>
<li>{{cssxref("element()")}}</li>
<li>{{cssxref("_image","image()")}}</li>
<li><font><font>{{cssxref ("набор изображений", "набор изображений ()")}}</font></font></li>
<li><font><font>{{cssxref ("плавное затухание")}}</font></font></li>
</ul>
|
