欢迎进入第4天的课程。在此之前我们主要 谈了文字样式设定，现在我们探讨一下要 素和图象方面的样式设置。通过学习今天 的课程，我们将掌握如何给要素赋予色彩， 将图象放在要素后面。如果以前你一直不 认为CSS是一种很有用的东西，那么今天将 是你大彻大悟的一天。
我们将学习以下CSS属性：
- 颜色
- 背景色
- 背景图象
- 重复背景
- 固定背景
- 背景定位
- 背景
为你的世界添加色彩
首先，我们谈一下将颜色加到网页要素上。
颜色
颜色属性并不陌生，它的用法很象HTML中使 用的参数值。
根据这项CSS规则，浏览器将网页上所有的加 重体字以设定的颜色显示，象这几个字那样。
如果你的浏览器不支持这项CSS属性，请点击 这里查看英文原版的显示效果。
有3种方法用于设定你所需要的颜色：
- 颜色名称
CSS所用的颜色名称同我们常用的称呼 方式。16种基本色为aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
但是Netscape和Microsoft的浏览器还 认可数百种其它色彩名称，参见 HYPE's Color Specifier.
- 16进制（hex）色彩控制
使用16进制数可实现对色彩的更精确 的控制，其格式为 #336699。16进制 （hex）色彩控制详见 Webreference.com。
CSS还支持某些hex值的快捷计数法。 比如， #336699可以被称为 #369。 浏览器会将其按照16进制格式阐释。
- RGB值
对于习惯于RGB计数法的用户，这里 将提供一种全新的色彩设定方法。 RGB法通常用于图象应用软件例如 Photoshop。利用RGB设定色彩的方法 如下：
B { color: rgb(51,204,0) } RGB的数值范围从0到255，R代表红色， G代表绿色，B代表蓝色。
IE 3不支持RGB格式，但是4.0版本的 浏览器都支持。
背景色
在传统的网页设计中，为了在某一要素后面 加上背景色，你必须先在要素周围生成表格 单元， 然后在表格单元中添加颜色。 利用 CSS添加背景色则相当容易。
背景色
利用CSS在网页要素后面加入固定的背景色 及图象。
The above rule has been applied to this entire paragraph. You can use any of the values we talked about on the previous page: color names, hex numbers, or RGB values.
你甚至可以将要素只加到某一个单词后面。
上述两段文字采用背景色CSS属性编成。如果你 的浏览器不支持这项属性，请点击这里查看英 文原版的显示效果。
在IE 3 和 Netscape Communicator中, 第一段 文字后的背景色延伸的长度不同.在IE 4中颜色 会延伸更多一些，在整个段落后面形成一个较 大的方块背景。
(注意：IE 3根本不支持背景色属性。但是它支 持背景设置，这种快捷属性也能达到同样的效 果。详见第6页。）
你还可以给背景色设定透明属性，也就是说， 不论背景色原来是什么颜色，都会以透明色显 示。
背景色的确是太棒了，而如果能给背景加上图 象，不就更棒了吗？你的梦想可以实现!
背景图象
背景图象
你可以很轻松地将GIF或JPEG图象加到一个要 素后面：
该规则将背景图象加到整个段落之后。你可以 将GIF图象采用和背景图象通常的设置类似的方 法平铺到文字后面。
如果你的浏览器不支持这项CSS属性，请点击 这里查看英文原版的显示效果。
你还可以将背景图象只添加到两个单词后面。 想把图象添加到整个浏览器窗口吗？那么你 可以将其添加到 <BODY>标签。
如果你的浏览器不支持这项CSS属性，请点击 这里窗口英文原版的显示效果。
你可以使用URL调用一幅图象，你既可以使用 相对UPL，例如 images/bg.gif或完整的URL, 例如 http://www.webmonkey.com/images/bg.gif.
none参数值将取消对背景图象的任何设置.
当你设定一个背景图象时，最好能指定一种 背景色。这样以来,下载背景图象的同时,固 定的背景色先出现在屏幕上。而且它将透过 背景图象上的透明色区显示出来。例：
CSS makes Webmonkeys gleeful.
你可以看到背景色紫色在GIF图象的透明色区 也显示出来。
如果你的浏览器不支持这项CSS属性，请点击 这里查看显示效果。
我们最常用的浏览器中可能会出现以下各种 背景图象问题：
- 在本篇所讨论的各种背景属性中，IE 3 只支持快捷背景属性，详见第6页。
- 当使用链接的样式表时，IE 3根本不显 示背景图象。
- 当你仅对段落的某一部分添加背景图象 时，Communicator (在两种操作平台上) 和IE 4 (Mac操作平台上) 有时候可能会 出问题，也许它根本不显示图象，也许 会在添加了背景图象的文字中加入行回 车。
- 如果你同时设定了背景图象和背景色， 有时候 Communicator将背景色的显示 排在优先的地位。
控制背景图象
你不仅可以将图象放在要素后面，你还可以精 确地控制背景图象的各项设置。你可以决定是 否及如何将其平铺，背景图象应该滚动还是保 持固定，及将其放在什么位置。朋友，这是真 的！
背景重复(background-repeat)
背景图象通常是平铺在背景上的，对吗？错。 利用这项CSS属性，你可以控制是否将其平铺。
上述规则应用于整个段落。我们以前用过的GIF 图象出现在文字后面，但由于我们应用了不重 复图象（no-repeat)规则，所以该图象不会重 复平铺在整个段落后面，它只显示一幅单独的 图象。
如果你只想让图象垂直或者水平方向平铺，你 可以使用repeat-x将其水平平铺，用repaet-y 将其垂直平铺。而repeat参数值则将图象从水 平和垂直两个方向平铺。
上述两段文字采用background-repeat属性写 出，如果你的浏览器不支持这项CSS属性，请点 击这里查看显示效果。
固定背景（background－attachment）
在HTML中，背景图象通常会随页面的滚动而一 起滚动。但利用CSS的固定背景（background） 属性，你可以建立不滚动的背景图象，页面滚 动时，背景图象可以保持固定。
BODY { background-attachment: fixed; background-image: url(/webmonkey/98/ 15/stuff3a/background.gif) }
这里是一个例子，你可以看到页面滚动时，背 景仍保持固定。（注意：Communicator不支持 这项属性，IE 可以。）
该属性只用于页面背景，即<BODY>标签内设定 的背景图象。
其参数有两种选择：
- scroll指背景图象随文字内容一起滚动， 即通常所见的方式。
- fixed指文字滚动时，背景图象保持固 定。
背景定位(background-position)
你可以设定将背景插在什么位置显示。
当上述CSS规则应用于本段文字时，背景图象 将在本段的中下部开始显示并向右平铺。
如果你的浏览器不支持中下CSS属性，请点击 这里查看英文原版的显示效果。
如果你看不到上述的显示效果，则说明你所使 用的浏览器是Communicator，它不支持背景定 位。
设定位置的3种方法：
- 关键字参数（Keyword values）
关键字设定方法简便易用：
- top将背景图象同前景要素的顶部 对齐。
- bottom将其同前景要素的底部对 齐。
- left将其同左边对齐。
- right将其同右边对齐。
- center将其水平居中（如果使用在 另一关键字前面）或垂直居中（如 果用在另一关键字后面）。
- 长度参数
长度参数可以使用你对背景图象的位置 作出更精确的控制。你可以设定水平和 垂直定位起点，例：
P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url (background.gif) }
本段显示了上述规则的执行效果。IE支持 这种属性，将GIF图象设置在从左上角起 水平70象素，垂直10象素的位置。由于我 设置了 background-repeat: repeat-y， GIF图象将在文字后垂直平铺。
如果你的浏览器不支持执行CSS属性，请 点击这里查看英文原版的显示效果。
你可以使用我们以前学过的任何一种长度 单位，例如pixels, points, inches, ems等。
（IE 3不支持长度单位显示这种效果）
- 比例值（Percentage values）
你还可以使用比例值设定背景图象的位 置，例：
P { background-position: 75% 50%; background-image: url (background.gif) }
当这条CSS规则应用于本段时，背景图象 从水平距离段落右端70％，垂直距离段落 顶部50％的位置显示。如果你重新调整浏 览器窗口的尺寸，使得段落的显示尺寸变 化，背景图象的位置也相应发生变化。在 本段上不会发生这样的变化，因为本段的 尺寸是固定的，不会随着窗口尺寸的调整 而变化。
如果你的浏览器不支持这项CSS属性，请点击 这里查看英文原版的显示效果。
快捷特性
利用快捷特性可以使你将学过的所有背景 属性加到一个CSS规则中。
IE 3中你必须这样应用（如我们以前提过 的），你也有可能会在所有浏览器中应用 它。
背景（background）
利用背景属性，你可以设定背景颜色、图象、 平铺方法、固定及滚动显示及定位。例：
本段应用了上述规则。你可以看到背景是浅绿 色，背景图象只垂直平铺，第1次平铺的位置 在右上角。注意Communicator不支持背景定位 属性。
如果你的浏览器不支持这项CSS属性，请点 击这里查看英文原版的显示效果。 如果你看不到该段文字描述的效果，则说明 你的浏览器不支持这项CSS属性。
使用背景属性时，你无须设定背景的每一项 目内容。你可以只设定你所要的背景图象和 色彩，或者设定其它组合。
使用快捷特性时也会碰到使用单另的背景属 性时遇到的各种浏览器问题。
第4日的练习
请点击本页查看例子，并试着自己重新制作 出例子中的效果，最好不要看代码。该例子 用了两幅图象，你可一从位置1.和位置2 处 下载。不要忘了，要使例子正确显示，你必 须安装4.0版的浏览器。
小问题：如何让你的公司的标志不论页面滚 动还是浏览器窗口尺寸调整都永远显示在浏 览器窗口的右下角？在明天的课程前我将告 诉你答案。
复习
样式表使得网页设计更加有趣。我们新近掌 握的控制背景图象的方法更另我们心动不已。 以下是我们今天所学内容的总结：
- color设定要素的前景颜色。
- background-color设定要素后面固定的 颜色。
- background-image是将GIF和JPEG图象 插入到文字和其它要素后面的方法。
- background-repeat可以控制是否将背 景图象平铺。
- background-attachment控制是否将背 景图象固定在屏幕显示上，不随文字 的滚动而滚动。
- background-position用于精确控制背 景图象相对于要素的显示位置。
- background是设定所有有关背景设置的 属性的快捷方式。
明天将是样式表课程的最好一天，我们将学 习将要素设置在页面的任何位置的方法，及 如何将各要素叠放在彼此之上。明天见！
教育资讯
评论者：
