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