免費AI編程助手
4.5 控制背景圖象
你不僅可以將圖象放在要素后面，你還可以精確地控制背景圖象的各項設置。你可以決定是否及如何將其平鋪，背景圖象應該滾動還是保持固定，及將其放在什么位置。朋友，這是真的！
背景重復(background-repeat)
背景圖象通常是平鋪在背景上的，對嗎？錯。利用這項CSS屬性，你可以控制是否將其平鋪。
P { background-repeat: no-repeat; background-image:
url(
background.gif) }上述規(guī)則應用于整個段落。我們以前用過的GIF圖象出現在文字后面，但由于我們應用了不重復圖象（no-repeat)規(guī)則，所以該圖象不會重復平鋪在整個段落后面，它只顯示一幅單獨的圖象。
如果你只想讓圖象垂直或者水平方向平鋪，你以使用repeat-x將其水平平鋪，用repaet-y將其垂直平鋪。而repeat參數值則將圖象從水平和垂直兩個方向平鋪。
固定背景（background－attachment）
在HTML中，背景圖象通常會隨頁面的滾動而一起滾動。但利用CSS的固定背景（background）屬性，你可以建立不滾動的背景圖象，頁面滾動時，背景圖象可以保持固定。
BODY { background-attachment: fixed; background-image:
url(
15/stuff3a/background.gif) }這里是一個例子，你可以看到頁面滾動時，背景仍保持固定。（注意：Communicator不支持這項屬性，IE可以。）
該屬性只用于頁面背景，即<BODY>標簽內設定的背景圖象。
其參數有兩種選擇：
scroll指背景圖象隨文字內容一起滾動，即通常所見的方式。
fixed指文字滾動時，背景圖象保持固定。
背景定位(background-position)
你可以設定將背景插在什么位置顯示。
P { background-position: center bottom; background-image: url (background.gif) }當上述CSS規(guī)則應用于本段文字時，背景圖象將在本段的中下部開始顯示并向右平鋪。
如果你看不到上述的顯示效果，則說明你所使用的瀏覽器是Communicator，它不支持背景定位。
設定位置的3種方法：
關鍵字參數（Keyword values）
關鍵字設定方法簡便易用：
top將背景圖象同前景要素的頂部對齊。
bottom將其同前景要素的底部對齊。
left將其同左邊對齊。
right將其同右邊對齊。
center將其水平居中（如果使用在另一關鍵字前面）或垂直居中（如果用在另一關鍵字后面）。
長度參數
長度參數可以使用你對背景圖象的位置作出更精確的控制。你可以設定水平和垂直定位起點，例：
本段顯示了上述規(guī)則的執(zhí)行效果。IE支持這種屬性，將GIF圖象設置在從左上角起水平70象素，垂直10象素的位置。由于我設置了 background-repeat: repeat-y，GIF圖象將在文字后垂直平鋪。
你可以使用我們以前學過的任何一種長度單位，例如pixels, points, inches, ems等。
（IE 3不支持長度單位顯示這種效果）
P { background-position: 70px 10px; background-repeat:
repeat-y; background-image: url
(background.gif) }比例值（Percentage values）
你還可以使用比例值設定背景圖象的位置，例：
P { background-position: 75% 50%; background-image:
url (background.gif) }
當這條CSS規(guī)則應用于本段時，背景圖象從水平距離段落右端70％，垂直距離段落頂部50％的位置顯示。如果你重新調整瀏覽器窗口的尺寸，使得段落的顯示尺寸變化，背景圖象的位置也相應發(fā)生變化。在本段上不會發(fā)生這樣的變化，因為本段的尺寸是固定的，不會隨著窗口尺寸的調整而變化。
更多建議：