📄 7-3-18.cfm.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>使用background属性控制图象</title>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
</head>
<body>
<b><font FACE="宋体">
<p ALIGN="JUSTIFY">使用background属性控制图象</p>
</font></b><font FACE="宋体" SIZE="3">
<p ALIGN="JUSTIFY">通过使用style sheet，你可以获得更多的对你网页上的背景图象的控制。例如，你可以为不同的HTML标识符指定不同的背景图象（见图7.31）。从下面的例子中你可以看到怎样使用background属性：</p>
<p ALIGN="JUSTIFY"><HTML></p>
<p ALIGN="JUSTIFY"><HEAD><br>
<TITLE> Style </TITLE></p>
<p ALIGN="JUSTIFY"><STYLE></p>
<p ALIGN="JUSTIFY"><!--</p>
<p ALIGN="JUSTIFY">Body {background: URL(checker.gif)}</p>
<p ALIGN="JUSTIFY">P {background: URL(myimage.gif)}</p>
<p ALIGN="JUSTIFY">.SmallImage {background: URL(smallimage.gif)}</p>
<p ALIGN="JUSTIFY">--></p>
<p ALIGN="JUSTIFY"></STYLE></p>
<p ALIGN="JUSTIFY"></HEAD></p>
<p ALIGN="JUSTIFY"><BODY></p>
<p ALIGN="JUSTIFY"><P> <SPAN CLASS=SmallImage> This </SPAN></p>
<p ALIGN="JUSTIFY">web page has three distinct background images.</p>
<p ALIGN="JUSTIFY"></P></p>
<p ALIGN="JUSTIFY"></BODY></p>
<p ALIGN="JUSTIFY"></HTML></p>
<p ALIGN="JUSTIFY"><img SRC="Image74.gif" tppabs="http://210.74.168.175/guide/asp/part7/Image74.gif" WIDTH="590" HEIGHT="403"></p>
<b>
<p ALIGN="CENTER">图7.31 具有多幅背景图象的网页</p>
</b>
<p ALIGN="JUSTIFY">使用标准HTML，你不能将文本放置在非主体背景的图象之上，而另一方面，使用Cascading
Style Sheet，这会非常简单。你通过提供图象的URL来指定一幅图象，就象URL(myimage.gif)。注意这些是普通的圆括号，而不是围绕在图象文件名字周围的花括号。</p>
<p ALIGN="JUSTIFY">使用background属性，你也可以实现对背景图象平铺行为的完全控制。例如，你可以指定一幅图象应该竖直平铺，而不是水平平铺，或采用别的方法（见图7.32）。在下例中，为<BODY>指定的规则让一幅背景图象只在竖直方向上重复：</p>
<p ALIGN="JUSTIFY"><HTML></p>
<p ALIGN="JUSTIFY"><HEAD><br>
<TITLE> Style </TITLE></p>
<p ALIGN="JUSTIFY"><STYLE></p>
<p ALIGN="JUSTIFY"><!--</p>
<p ALIGN="JUSTIFY">Body {background: URL(myimage.gif) repeat-y white}</p>
<p ALIGN="JUSTIFY">--></p>
<p ALIGN="JUSTIFY"></STYLE></p>
<p ALIGN="JUSTIFY"></HEAD></p>
<p ALIGN="JUSTIFY"><BODY></p>
<p ALIGN="JUSTIFY">The image is only on my left! The image is only on my left!</p>
<p ALIGN="JUSTIFY"></BODY></p>
<p ALIGN="JUSTIFY"></HTML></p>
<p ALIGN="JUSTIFY"> </p>
<p ALIGN="JUSTIFY"><img SRC="Image75.gif" tppabs="http://210.74.168.175/guide/asp/part7/Image75.gif" WIDTH="591" HEIGHT="405"></p>
<b>
<p ALIGN="CENTER">图7.32 在一个方向上平铺背景图象</p>
</b>
<p ALIGN="JUSTIFY"> </p>
<b>
<p ALIGN="JUSTIFY">注意</p>
</b>
<p ALIGN="JUSTIFY">注意此例中使用的颜色关键字white，即使你使用了背景图象，你也应当设定背景颜色。当浏览器读入一幅图象时，会先显示背景图象。而且，如果一幅图象没有覆盖整个区域，背景颜色就会在剩余的空间显示出来。</p>
<p ALIGN="JUSTIFY"> </p>
<p ALIGN="JUSTIFY">如果你使用了repeat-x值而不是repeat-y值，则图象就会在水平方向上平铺，而不会在竖直方向上显示。如果你根本就不想让图象平铺，你就可以使用值no-repeat。如果你使用了这个值，图象就只会显示一次。</p>
<p ALIGN="JUSTIFY">如果你想控制图象的滚动特性，你可以使用两个关键字：fixed和scroll。通常，当你滚动一个网页的内容时，背景图象也跟着滚动，你可以通过使用fixed关键字来防止这一行为的发生。</p>
<p ALIGN="JUSTIFY"> </p>
<b>
<p ALIGN="JUSTIFY">注意</p>
</b>
<p ALIGN="JUSTIFY">Netscape Navigator的所有版本――包括4.0――都不能识别fixed关键字。你不能防止背景图象随着网页内容一起滚动，这意味着image-alignment属性的用途有限。</p>
<p ALIGN="JUSTIFY"> </p>
<b>
<p ALIGN="JUSTIFY">注意</p>
</b>
<p ALIGN="JUSTIFY">如果你在Internet Explorer 3.0中使用scroll关键字，将会引起混乱。浏览器将会把这个关键字解释为fixed。然而，你不需要使用fixed这个关键字，因为它是缺省值。</p>
<p ALIGN="JUSTIFY"> </p>
<p ALIGN="JUSTIFY">你可以使用三个关键字：left、center和right来对齐图象。你可以使用这些关键字来水平地对齐一幅图象。要想竖直地对齐图象，应该使用下面三个关键字：top、middle和bottom。下面的例子说明了如何使用（见图7.33）：</p>
<p ALIGN="JUSTIFY"><HTML></p>
<p ALIGN="JUSTIFY"><HEAD><br>
<TITLE> Style </TITLE></p>
<p ALIGN="JUSTIFY"><STYLE></p>
<p ALIGN="JUSTIFY"><!--</p>
<p ALIGN="JUSTIFY">Body {background: URL(myimage.gif) fixed bottom right white}</p>
<p ALIGN="JUSTIFY">--></p>
<p ALIGN="JUSTIFY"></STYLE></p>
<p ALIGN="JUSTIFY"></HEAD></p>
<p ALIGN="JUSTIFY"><BODY></p>
<p ALIGN="JUSTIFY">The image is in the bottom right corner of the screen!</p>
<p ALIGN="JUSTIFY"></BODY></p>
<p ALIGN="JUSTIFY"></HTML></p>
<p ALIGN="JUSTIFY"><img SRC="Image76.gif" tppabs="http://210.74.168.175/guide/asp/part7/Image76.gif" WIDTH="590" HEIGHT="403"></p>
<b>
<p ALIGN="CENTER">图7.33 使用style sheet安放背景图象</p>
</b></font>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -