使用CSS可以為html標籤指定背景映像或背景顏色,並且可以設定映像的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><!--(1)設定背景顏色:background-color(2)設定背景映像:background-image(3)設定背景映像的重複:background-repeat(4)背景定位:background-position(5)背景關聯:background-attachment--><head> <style> h1 {background-color:#afa} h2 {background-color:rgb(255,187,187)} p#bgImage { background-image:url(images/bg_image.jpg); padding:10px; } p#bgImageKeywords { background-color:#ddd; background-image:url(images/d_sikao.png); padding:30px; background-repeat:no-repeat; background-position:left bottom; } p#bgImagePercent { width:400px; background-color:#ddd; background-image:url(images/d_sikao.png); padding:40px; background-repeat:no-repeat; background-position:20% 80%; } p#bgImageOffset { width:400px; background-color:#ddd; background-image:url(images/d_sikao.png); padding:40px; background-repeat:no-repeat; background-position:200px 20px; } p#bgImageAttach { background-image:url(images/bg_image.jpg); padding:10px; background-attachment:fixed; } </style></head><title>CSS 背景</title><body> <h1>這是一個h1層級的標題:淡綠色</h1> <h2>這是一個h2層級的標題:淡紅色</h2> <h3>這是一個h3層級的標題(沒有設定樣式)</h3> <p id="bgImage"> <p>這個段落有背景映像,有內邊距,允許重複(預設)<p> </p> <br/> <!--使用 關鍵字 描述背景映像的位置。位置關鍵字可以按任何順序出現,只要保證不超過兩個關鍵字:一個對應水平方向,另一個對應垂直方向。如果只出現一個關鍵字,則認為另一個關鍵字是 center。--> <p id="bgImageKeywords"> <p>淡灰色背景色,同時有背景映像,不允許重複,背景映像居 左下方 顯示<p> </p> <br/> <!--使用 百分比 描述背景映像的位置。百分比是映像相對於元素的位置(而不是整個瀏覽器視窗)。 如果只提供一個百分數值,所提供的這個值將用作水平值,垂直值將假設為 50%。這一點與關鍵字類似。--> <p id="bgImagePercent" > <p>背景映像相對元素居 水平20%,垂直80% 顯示<p> </p> <br/> <!--使用 位移量 描述背景映像的位置。即映像的左上方與 background-position 聲明中的指定的點對齊。--> <p id="bgImageOffset"> <p>背景映像相對元素左上方的位移量為水平200px,垂直20px<p> </p> <br/> <!--背景關聯。如果文檔比較長,那麼當文檔向下滾動時,背景映像也會隨之滾動。當文檔滾動到超過映像的位置時,映像就會消失。--> <p id="bgImageAttach"> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> <p>這個段落的背景映像不會隨著文字滾動。<p> </p></body></html>
: