上一篇：控制背景色和前景色 >>

使用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>

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属性的用途有限。

注意

如果你在Internet 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安放背景图象

返回顶部

下一篇：精确安置空白 >>