?? 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 + -