?? 7-3-18.cfm.htm
字號(hào):
<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">通過(guò)使用style sheet，你可以獲得更多的對(duì)你網(wǎng)頁(yè)上的背景圖象的控制。例如，你可以為不同的HTML標(biāo)識(shí)符指定不同的背景圖象（見(jiàn)圖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 具有多幅背景圖象的網(wǎng)頁(yè)</p>
</b>
<p ALIGN="JUSTIFY">使用標(biāo)準(zhǔn)HTML，你不能將文本放置在非主體背景的圖象之上，而另一方面，使用Cascading
Style Sheet，這會(huì)非常簡(jiǎn)單。你通過(guò)提供圖象的URL來(lái)指定一幅圖象，就象URL(myimage.gif)。注意這些是普通的圓括號(hào)，而不是圍繞在圖象文件名字周?chē)幕ɡㄌ?hào)。</p>
<p ALIGN="JUSTIFY">使用background屬性，你也可以實(shí)現(xiàn)對(duì)背景圖象平鋪行為的完全控制。例如，你可以指定一幅圖象應(yīng)該豎直平鋪，而不是水平平鋪，或采用別的方法（見(jiàn)圖7.32）。在下例中，為<BODY>指定的規(guī)則讓一幅背景圖象只在豎直方向上重復(fù)：</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 在一個(gè)方向上平鋪背景圖象</p>
</b>
<p ALIGN="JUSTIFY"> </p>
<b>
<p ALIGN="JUSTIFY">注意</p>
</b>
<p ALIGN="JUSTIFY">注意此例中使用的顏色關(guān)鍵字white，即使你使用了背景圖象，你也應(yīng)當(dāng)設(shè)定背景顏色。當(dāng)瀏覽器讀入一幅圖象時(shí)，會(huì)先顯示背景圖象。而且，如果一幅圖象沒(méi)有覆蓋整個(gè)區(qū)域，背景顏色就會(huì)在剩余的空間顯示出來(lái)。</p>
<p ALIGN="JUSTIFY"> </p>
<p ALIGN="JUSTIFY">如果你使用了repeat-x值而不是repeat-y值，則圖象就會(huì)在水平方向上平鋪，而不會(huì)在豎直方向上顯示。如果你根本就不想讓圖象平鋪，你就可以使用值no-repeat。如果你使用了這個(gè)值，圖象就只會(huì)顯示一次。</p>
<p ALIGN="JUSTIFY">如果你想控制圖象的滾動(dòng)特性，你可以使用兩個(gè)關(guān)鍵字：fixed和scroll。通常，當(dāng)你滾動(dòng)一個(gè)網(wǎng)頁(yè)的內(nèi)容時(shí)，背景圖象也跟著滾動(dòng)，你可以通過(guò)使用fixed關(guān)鍵字來(lái)防止這一行為的發(fā)生。</p>
<p ALIGN="JUSTIFY"> </p>
<b>
<p ALIGN="JUSTIFY">注意</p>
</b>
<p ALIGN="JUSTIFY">Netscape Navigator的所有版本――包括4.0――都不能識(shí)別fixed關(guān)鍵字。你不能防止背景圖象隨著網(wǎng)頁(yè)內(nèi)容一起滾動(dòng)，這意味著image-alignment屬性的用途有限。</p>
<p ALIGN="JUSTIFY"> </p>
<b>
<p ALIGN="JUSTIFY">注意</p>
</b>
<p ALIGN="JUSTIFY">如果你在Internet Explorer 3.0中使用scroll關(guān)鍵字，將會(huì)引起混亂。瀏覽器將會(huì)把這個(gè)關(guān)鍵字解釋為fixed。然而，你不需要使用fixed這個(gè)關(guān)鍵字，因?yàn)樗侨笔≈怠?lt;/p>
<p ALIGN="JUSTIFY"> </p>
<p ALIGN="JUSTIFY">你可以使用三個(gè)關(guān)鍵字：left、center和right來(lái)對(duì)齊圖象。你可以使用這些關(guān)鍵字來(lái)水平地對(duì)齊一幅圖象。要想豎直地對(duì)齊圖象，應(yīng)該使用下面三個(gè)關(guān)鍵字：top、middle和bottom。下面的例子說(shuō)明了如何使用（見(jiàn)圖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>
?? 快捷鍵說(shuō)明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -