11<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22<html lang="en">
3- <!-- $Id: colors.src,v 2.14 1998-04-07 20:28:45 ijacobs Exp $ -->
3+ <!-- $Id: colors.src,v 2.15 1998-04-17 21:04:42 ijacobs Exp $ -->
44<HEAD>
55<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66<TITLE>Colors and backgrounds</TITLE>
1010
1111<P>CSS properties allow authors to specify the foreground color and
1212background of an element. Backgrounds may be colors or
13- images. Background properties allow authors to position the image,
13+ images. Background properties allow authors to position a background image,
1414repeat it, and declare whether it should be fixed with respect
1515to the <a href="visuren.html#viewport">viewport</a> or scrolled
1616along with the document.
@@ -40,7 +40,7 @@ rendering surface) as either a color or an image. In terms of the <a
4040href="box.html#box-model">box model</a>, "background" refers to
4141the background of the <a
4242href="box.html#box-content-area">content</a> and the <a
43- href="box.html#box-padding-area">padding</a> area . Border colors
43+ href="box.html#box-padding-area">padding</a> areas . Border colors
4444and styles are set with the <a
4545href="box.html#border-properties">border properties</a>. Margins
4646are always transparent so the background of the parent box always
@@ -72,10 +72,10 @@ HTML document will have a "marble" background:
7272<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
7373<HTML>
7474 <HEAD>
75+ <TITLE>Setting the canvas background</TITLE>
7576 <STYLE type="text/css">
7677 BODY { background: url(http://style.com/marble.png) }
7778 </STYLE>
78- <TITLE>Setting the canvas background</TITLE>
7979 </HEAD>
8080 <BODY>
8181 <P>My background is marble.
@@ -111,17 +111,6 @@ class="propinst-background-position">'background-position'</span>, and
111111class="value-inst-color"><color></span></span> value or the keyword
112112'transparent', to make the underlying colors shine through.
113113
114- <!--
115- Values have the following meanings:</P>
116-
117- <dl>
118- <dt><span class="index-inst" title="<color>"><span class="value-inst-color"><strong><color></strong></span></span>
119- <dd>Specifies a color name or value.
120- <dt><strong>transparent</strong>
121- <dd>The background is transparent, so all underlying colors shine through.
122- </dl>
123- -->
124-
125114<div class="example"><P>
126115<PRE>
127116H1 { background-color: #F00 }
@@ -137,7 +126,8 @@ color that will be used when the image is unavailable. When the image
137126is available, it is rendered on top of the background color. (Thus,
138127the color is visible in the transparent parts of the image).
139128
140- <P>The values are <span class="index-inst" title="<uri>"><span
129+ <P>Values for this property are either <span class="index-inst"
130+ title="<uri>"><span
141131class="value-inst-uri"><uri></span></span>, to specify the
142132image, or 'none', when no image is used.
143133
@@ -247,17 +237,17 @@ class="value-inst-percentage"><strong><percentage></strong></span></span>
247237is aligned with the upper left corner of the box's <a
248238href="box.html#padding-edge">padding edge</a>. A value pair of
249239'100% 100%' places the lower right corner of the image in the lower
250- right corner of the box . With a value pair of '14% 84%', the point
240+ right corner of padding area . With a value pair of '14% 84%', the point
25124114% across and 84% down the image is to be placed at the point 14%
252- across and 84% down the box .
242+ across and 84% down the padding area .
253243
254244<dt><span class="index-inst" title="<length>"><span
255245class="value-inst-length"><strong><length></strong></span></span>
256246 <span class="index-inst" title="<length>"><span
257247class="value-inst-length"><strong><length></strong></span></span>
258248<dd> With a value pair of '2cm 2cm', the upper left corner of the image
259249is placed 2cm to the right and 2cm below the upper left corner of the
260- box .
250+ padding area .
261251<dt>
262252<dt><strong>top left</strong> and <strong>left top</strong>
263253<dd>Same as '0% 0%'.
@@ -307,7 +297,7 @@ BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
307297<span
308298class="propinst-background-attachment">'background-attachment'</span>
309299property), the image is placed relative to the viewport instead of the
310- element's box . For example,
300+ element's padding area . For example,
311301
312302<div class="example"><P>
313303<PRE>
@@ -335,12 +325,9 @@ and <span
335325class="propinst-background-position">'background-position'</span>) at
336326the same place in the style sheet.
337327
338- <P><P> The <span class="propinst-background">'background'</span>
339- property always sets all the individual background properties. <!--The
340- <span class="propinst-background">'background'</span> property helps
341- authors remember to specify all aspects of a background which they
342- might otherwise neglect by using the individual background
343- properties. -->
328+ <P> The <span class="propinst-background">'background'</span> property
329+ first sets all the individual background properties to their initial
330+ values, then assigns explicit values given in the declaration.
344331
345332<div class="example"><P>
346333In the first rule of the following example, only a value for <span
@@ -384,7 +371,7 @@ on current platforms is:
384371
385372<P>"Applying gamma" means that each of the three R, G and B must be
386373converted to R'=R<SUP>gamma</SUP>, G'=G<SUP>gamma</SUP>,
387- B'=B<SUP>gamma</SUP>, before handing to the OS.
374+ B'=B<SUP>gamma</SUP>, before being handed to the OS.
388375
389376<P>This may rapidly be done by building a 256-element lookup table
390377once per browser invocation thus:
0 commit comments