-
Notifications
You must be signed in to change notification settings - Fork 635
/
colors.src
428 lines (376 loc) · 15.5 KB
/
colors.src
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<!-- $Id: colors.src,v 2.61 2011-10-18 19:25:27 bbos Exp $ -->
<head>
<title>Colors and backgrounds</title>
<!--script src="http://www.w3c-test.org/css/harness/annotate.js#CSS21_DEV" type="text/javascript" defer></script-->
<style type="text/css">
.current,.proposed,span.delcurrent { background:#feb }
ins.proposed,span.insproposed,p.insproposed { background:#bfb }
del.proposed,span.delproposed { background:#fbb }
span.insproposed,p.insproposed { text-decoration:underline }
span.delproposed,span.delcurrent { text-decoration:line-through }
body>del,body>ins {display:block}
</style>
</head>
<body>
<h1>Colors and Backgrounds</h1>
<p>CSS properties allow authors to specify the foreground color and
background of an element. Backgrounds may be colors or
images. Background properties allow authors to position a background image,
repeat it, and declare whether it should be fixed with respect
to the <a href="visuren.html#viewport">viewport</a> or scrolled
along with the document.
</p>
<p> See the section on <a href="./syndata.html#color-units">color units</a>
for the syntax of valid color values.
</p>
<h2><a name="colors">Foreground color</a>: the <span
class="propinst-color">'color'</span> property</h2>
<!-- #include src=properties/color.srb -->
<p> This property describes the foreground color of an element's text
content. There are different ways to specify red:
</p>
<div class="example">
<pre>
em { color: red } /* predefined color name */
em { color: rgb(255,0,0) } /* RGB range 0-255 */
</pre>
</div>
<h2><a name="background">The background</a></h2>
<p>Authors may specify the background of an element (i.e., its
rendering surface) as either a color or an image. In terms of the <a
href="box.html#box-model">box model</a>, "background" refers to
the background of the <a
href="box.html#box-content-area">content</a>, <a
href="box.html#box-padding-area">padding</a> and <a
href="box.html#box-border-area">border</a> areas. Border colors
and styles are set with the <a
href="box.html#border-properties">border properties</a>. Margins
are always transparent.
</p>
<p>Background properties are not inherited, but the parent box's
background will shine through by default because of the initial
'transparent' value on <span
class="propinst-background-color">'background-color'</span>.
</p>
<p>
The background of the root element becomes the background of the canvas and
covers the entire <a href="intro.html#canvas">canvas</a>, anchored (for
<span class="propinst-background-position">'background-position'</span>) at
the same point as it would be if it was painted only for the root element
itself. The root element does not paint this background again.
</p>
<p>For HTML documents, however, we recommend that authors specify the
background for the BODY element rather than the HTML element.
For documents whose root element is an HTML "HTML" element or an XHTML
"html" element that has computed values of 'transparent' for <span
class="propinst-background-color">'background-color'</span> and 'none'
for <span class="propinst-background-image">'background-image'</span>,
user agents must instead use the computed value of the background properties
from that element's first HTML "BODY" element or XHTML "body" element
child when painting backgrounds for the canvas, and must not paint a
background for that child element. Such backgrounds must also be
anchored at the same point as they would be if they were painted only
for the root element.
</p>
<p>However, if no boxes are generated for the element whose background
would be used for the background of the canvas, then the canvas
background is transparent. (In CSS 2.2, that is the case when the
element or an ancestor has 'display: none'.)
<p>Note that, if the element has 'visibility: hidden' but not
'display: none', boxes <em>are</em> generated for it and its
background <em>is</em> used for the canvas.
<div class="html example"><p>
According to these rules, the canvas underlying the following
HTML document will have a "marble" background:
</p>
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<TITLE>Setting the canvas background</TITLE>
<STYLE type="text/css">
BODY { background: url("http://example.com/marble.png") }
</STYLE>
<P>My background is marble.
</pre>
<p>
Note that the rule for the BODY element will work even though the BODY tag has been omitted in the HTML source since the HTML parser will infer the missing tag.
</p>
</div>
<p>
Backgrounds of elements that form a stacking context (see the
<span
class="propinst-z-index">'z-index'</span> property) are painted at the bottom of the element's
stacking context, below anything in that stacking context.
</p>
<h3><a name="background-properties">Background properties</a>: <span
class="propinst-background-color">'background-color'</span>, <span
class="propinst-background-image">'background-image'</span>, <span
class="propinst-background-repeat">'background-repeat'</span>, <span
class="propinst-background-attachment">'background-attachment'</span>,
<span
class="propinst-background-position">'background-position'</span>, and
<span class="propinst-background">'background'</span>
</h3>
<!-- #include src=properties/background-color.srb -->
<p>This property sets the background color of an element, either a
<span class="index-inst" title="<color>"><span
class="value-inst-color"><color></span></span> value or the keyword
'transparent', to make the underlying colors shine through.
</p>
<div class="example">
<pre>
h1 { background-color: #F00 }
</pre>
</div>
<!-- #include src=properties/background-image.srb -->
<p> This property sets the background image of an element. When
setting a background image, authors should also specify a background
color that will be used when the image is unavailable. When the image
is available, it is rendered on top of the background color. (Thus,
the color is visible in the transparent parts of the image).
</p>
<p>Values for this property are either <span class="index-inst"
title="<uri>"><span
class="value-inst-uri"><uri></span></span>, to specify the
image, or 'none', when no image is used.
</p>
<div class="example">
<pre>
body { background-image: url("marble.png") }
p { background-image: none }
</pre>
</div>
<p>Intrinsic dimensions expressed as percentages must be resolved
relative to the dimensions of the rectangle that establishes the
coordinate system for the <span
class="propinst-background-position">'background-position'</span>
property.
</p>
<p>If the image has one of either an intrinsic width or an intrinsic
height and an intrinsic aspect ratio, then the missing dimension is
calculated from the given dimension and the ratio.
</p>
<p> If the image has one of either an intrinsic width or an intrinsic
height and no intrinsic aspect ratio, then the missing dimension is
assumed to be the size of the rectangle that establishes the
coordinate system for the 'background-position' property.
</p>
<p>If the image has no intrinsic dimensions and has an intrinsic ratio
the dimensions must be assumed to be the largest dimensions at that
ratio such that neither dimension exceeds the dimensions of the
rectangle that establishes the coordinate system for the <span
class="propinst-background-position">'background-position'</span>
property.
</p>
<p>If the image has no intrinsic ratio either, then the dimensions
must be assumed to be the rectangle that establishes the coordinate
system for the <span
class="propinst-background-position">'background-position'</span>
property.
</p>
<!-- #include src=properties/background-repeat.srb -->
<p>If a background image is specified, this property specifies whether
the image is repeated (tiled), and how. All tiling covers the <a
href="box.html#box-content-area">content</a>, <a
href="box.html#box-padding-area">padding</a> and <a
href="box.html#box-border-area">border</a> areas of a box.
</p><p>
The tiling and positioning of the
background-image on inline elements is undefined in this specification.
A future level of CSS may define the tiling and positioning of the
background-image on inline elements.
</p>
<p>Values have the following meanings:</p>
<dl>
<dt><strong>repeat</strong></dt>
<dd>The image is repeated both horizontally and vertically.</dd>
<dt><strong>repeat-x</strong></dt>
<dd>The image is repeated horizontally only.</dd>
<dt><strong>repeat-y</strong></dt>
<dd>The image is repeated vertically only.</dd>
<dt><strong>no-repeat</strong></dt>
<dd>The image is not repeated: only one copy of the image is drawn.</dd>
</dl>
<div class="example">
<pre>
body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
</pre>
<div class="figure">
<p><img src="images/bg-repeat.png" alt="A centered background image,
with copies repeated up and down the padding and content areas.">
</p>
<p class="caption">One copy of the background image is centered, and
other copies are put above and below it to make a vertical band behind
the element.
</p>
</div>
</div>
<!-- #include src=properties/background-attachment.srb -->
<p>If a background image is specified, this property specifies
whether it is fixed with regard to the <a
href="visuren.html#viewport">viewport</a> ('fixed') or scrolls along
with the containing block ('scroll').</p>
<p>Note that there is only one viewport per view. If an element has
a scrolling mechanism (see 'overflow'), a 'fixed' background does not
move with the element, and a 'scroll' background does not move with
the scrolling mechanism.</p>
<p>Even if the image is fixed, it is still only visible when it is in
the content, padding or border area of the element. Thus, unless
the image is tiled ('background-repeat: repeat'), it may be invisible.
</p>
<p>In paged media, where there is no viewport, a 'fixed' background is
fixed with respect to the page box and is therefore replicated on
every page.
<div class="example"><p>This example creates an infinite vertical band
that remains "glued" to the viewport when the element is scrolled.
</p>
<pre>
body {
background: red url("pendant.png");
background-repeat: repeat-y;
background-attachment: fixed;
}
</pre>
</div>
<p>
User agents that do not support 'fixed' backgrounds (for example due
to limitations of the hardware platform) should ignore declarations
with the keyword 'fixed'. For example:
</p>
<pre>
body {
background: white url(paper.png) scroll; /* for all UAs */
background: white url(ledger.png) fixed; /* for UAs that do fixed backgrounds */
}
</pre>
<p>
See the section on <a
href="conform.html#conformance">conformance</a> for details.
</p>
<!-- #include src=properties/background-position.srb -->
<p>If a background image has been specified, this property specifies
its initial position. If only one value is specified, the second value
is assumed to be 'center'. If at least one value is not a keyword,
then the first value represents the horizontal position and the second
represents the vertical position. Negative <percentage> and
<length> values are allowed.
<!-- '50% left' is not allowed, because 'left' is not a vertical
position. Is that clear from the above? -->
<dl>
<dt><span class="index-inst" title="<percentage>"><span
class="value-inst-percentage"><strong><percentage></strong></span></span>
<dd>A percentage X aligns the point X% across (for horizontal) or
down (for vertical) the image with the point X% across (for
horizontal) or down (for vertical) the element's padding box. For
example, with a value pair of '0% 0%',the upper left corner of the
image is aligned with the upper left corner of the padding box. A
value pair of '100% 100%' places the lower right corner of the image
in the lower right corner of the padding box. With a value pair of
'14% 84%', the point 14% across and 84% down the image is to be
placed at the point 14% across and 84% down the padding box.
<dt><span class="index-inst" title="<length>"><span
class="value-inst-length"><strong><length></strong></span></span>
<dd>A length L aligns the top left corner of the image a distance L
to the right of (for horizontal) or below (for vertical) the top
left corner of the element's padding box. For example, with a value
pair of '2cm 1cm', the upper left corner of the image is placed 2cm
to the right and 1cm below the upper left corner of the padding
box.
<dt><strong>top</strong>
<dd>Equivalent to '0%' for the vertical position.
<dt><strong>right</strong>
<dd>Equivalent to '100%' for the horizontal position.
<dt><strong>bottom</strong>
<dd>Equivalent to '100%' for the vertical position.
<dt><strong>left</strong>
<dd>Equivalent to '0%' for the horizontal position.
<dt><strong>center</strong>
<dd>Equivalent to '50%' for the horizontal position if it is not
otherwise given, or '50%' for the vertical position if it is.
</dl>
<p>However, the position is undefined in CSS 2.2 if the image has
an intrinsic ratio, but no intrinsic size.
<div class="example">
<pre>
body { background: url("banner.jpeg") right top } /* 100% 0% */
body { background: url("banner.jpeg") top center } /* 50% 0% */
body { background: url("banner.jpeg") center } /* 50% 50% */
body { background: url("banner.jpeg") bottom } /* 50% 100% */
</pre>
</div>
<p>
The tiling and positioning of the
background-image on inline elements is undefined in this specification.
A future level of CSS may define the tiling and positioning of the
background-image on inline elements.
</p>
<p> If the background image is fixed within the viewport (see the
<span
class="propinst-background-attachment">'background-attachment'</span>
property), the image is placed relative to the viewport instead of the
element's padding box. For example,
</p>
<div class="example">
<pre>
body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
</pre>
<p> In the example above, the (single) image is placed in the lower-right
corner of the viewport.
</p>
</div>
<!-- #include src=properties/background.srb -->
<p> The <span class="propinst-background">'background'</span> property
is a shorthand property for setting the individual background
properties (i.e., <span
class="propinst-background-color">'background-color'</span>, <span
class="propinst-background-image">'background-image'</span>, <span
class="propinst-background-repeat">'background-repeat'</span>, <span
class="propinst-background-attachment">'background-attachment'</span>
and <span
class="propinst-background-position">'background-position'</span>) at
the same place in the style sheet.
</p>
<p>Given a valid declaration,
the <span class="propinst-background">'background'</span> property
first sets all the individual background properties to their initial
values, then assigns explicit values given in the declaration.
</p>
<div class="example"><p>
In the first rule of the following example, only a value for <span
class="propinst-background-color">'background-color'</span> has been
given and the other individual properties are set to their initial
value. In the second rule, all individual properties have been
specified.
</p>
<pre>
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }
</pre>
</div>
</body>
</html>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-omittag:nil
sgml-shorttag:nil
sgml-minimize-attributes:nil
sgml-always-quote-attributes:t
sgml-indent-step:nil
sgml-indent-data:t
sgml-parent-document:nil
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
-->