模板
教程
环境
性能
功能
管理
使用background属性控制图象
使用background属性控制图象
通过使用style sheet，你可以获得更多的对你网页上的背景图象的控制。例如，你可以为不同的HTML标识符指定不同的背景图象（见图7.31）。从下面的例子中你可以看到怎样使用background属性：
<HTML>
<HEAD>
<TITLE> Style </TITLE>
<STYLE>
<!--
Body {background: URL(checker.gif)}
P {background: URL(myimage.gif)}
.SmallImage {background: URL(smallimage.gif)}
-->
</STYLE>
</HEAD>
<BODY>
<P> <SPAN CLASS=SmallImage> This </SPAN>
web page has three distinct background images.
</P>
</BODY>
</HTML>
图7.31 具有多幅背景图象的网页
使用标准HTML，你不能将文本放置在非主体背景的图象之上，而另一方面，使用Cascading Style Sheet，这会非常简单。你通过提供图象的URL来指定一幅图象，就象URL(myimage.gif)。注意这些是普通的圆括号，而不是围绕在图象文件名字周围的花括号。
使用background属性，你也可以实现对背景图象平铺行为的完全控制。例如，你可以指定一幅图象应该竖直平铺，而不是水平平铺，或采用别的方法（见图7.32）。在下例中，为<BODY>指定的规则让一幅背景图象只在竖直方向上重复：
<HTML>
<HEAD>
<TITLE> Style </TITLE>
<STYLE>
<!--
Body {background: URL(myimage.gif) repeat-y white}
-->
</STYLE>
</HEAD>
<BODY>
The image is only on my left! The image is only on my left!
</BODY>
</HTML>
图7.32 在一个方向上平铺背景图象
注意
注意此例中使用的颜色关键字white，即使你使用了背景图象，你也应当设定背景颜色。当浏览器读入一幅图象时，会先显示背景图象。而且，如果一幅图象没有覆盖整个区域，背景颜色就会在剩余的空间显示出来。
如果你使用了repeat-x值而不是repeat-y值，则图象就会在水平方向上平铺，而不会在竖直方向上显示。如果你根本就不想让图象平铺，你就可以使用值no-repeat。如果你使用了这个值，图象就只会显示一次。
如果你想控制图象的滚动特性，你可以使用两个关键字：fixed和scroll。通常，当你滚动一个网页的内容时，背景图象也跟着滚动，你可以通过使用fixed关键字来防止这一行为的发生。
注意
Netscape Navigator的所有版本――包括4.0――都不能识别fixed关键字。你不能防止背景图象随着网页内容一起滚动，这意味着image-alignment属性的用途有限。
注意
如果你在Inte.net Explorer 3.0中使用scroll关键字，将会引起混乱。浏览器将会把这个关键字解释为fixed。然而，你不需要使用fixed这个关键字，因为它是缺省值。
你可以使用三个关键字：left、center和right来对齐图象。你可以使用这些关键字来水平地对齐一幅图象。要想竖直地对齐图象，应该使用下面三个关键字：top、middle和bottom。下面的例子说明了如何使用（见图7.33）：
<HTML>
<HEAD>
<TITLE> Style </TITLE>
<STYLE>
<!--
Body {background: URL(myimage.gif) fixed bottom right white}
-->
</STYLE>
</HEAD>
<BODY>
The image is in the bottom right corner of the screen!
</BODY>
</HTML>
图7.33 使用style sheet安放背景图象
