在制作網(wǎng)頁時(shí)，常常會應(yīng)用到背景圖片。但是，有許多朋友不了解背景圖片的設(shè)置方法，從而使制作出來的網(wǎng)頁效果不太理想。
在制作網(wǎng)頁的時(shí)候，我們常常應(yīng)用這種方法。給網(wǎng)頁內(nèi)容，設(shè)置一個(gè)背景，來襯托網(wǎng)頁內(nèi)容，使我們制作的網(wǎng)頁更加漂亮，更加美觀。
像前面我們講解過的多重表格，你設(shè)置的第一套表格標(biāo)簽，它就是第一層。在第一層表格的單元格中放入的第二套表格標(biāo)簽，它就是第二層。在第二層表格的單元格中放入的第三套表格標(biāo)簽，它就是第三層?！?/DIV>
第一層在最下面，或者說在最深處；再往上面就是第二層、第三層……越在下面的層，越在深處；越在上面的層，越在淺處。最上面的層，就是前景，在前景下面（或者是深處）的層，都是背景。
背景可以設(shè)置為顏色，也可以設(shè)置為圖片。
1、用html代碼設(shè)置：
表達(dá)方式舉例：bgColor="#00f200"
用html代碼設(shè)置背景顏色，一般用于表格標(biāo)簽。用于其它標(biāo)簽中，好多的瀏覽器不支持。
2、用css樣式設(shè)置：
表達(dá)方式舉例：style="BACKGROUND-COLOR: #888888”或者style="BACKGROUND-COLOR: rgb(0,188,0)"
用css樣式設(shè)置背景顏色，可用于多種標(biāo)簽。例如：段落、塊區(qū)、文字標(biāo)簽、移動、表格等標(biāo)簽。
1、用html代碼設(shè)置：
表達(dá)方式舉例：
用html代碼設(shè)置背景圖片，多用于表格標(biāo)簽。用于其它標(biāo)簽中，好多的瀏覽器不支持。
2、用css樣式設(shè)置：
用css樣式設(shè)置背景圖片，可用于多種標(biāo)簽。例如：段落、塊區(qū)、文字標(biāo)簽、移動、表格等標(biāo)簽。
背景圖片的平鋪，有許多種方法。弄清楚這些方法，在制作網(wǎng)頁時(shí)，我們就能夠根據(jù)自己的需要靈活方便地應(yīng)用了。
（一）水平方向與垂直方向平鋪：
上面所舉的例子，都是水平方向與垂直方向都平鋪的例子。
1、有些網(wǎng)頁，我們是需要背景圖片水平方向與垂直方向都平鋪的。制作這種網(wǎng)頁，背景圖片的高度與寬度可以不加控制。
2、有些網(wǎng)頁，是需要控制背景圖片的平鋪狀況的。例如，我們用風(fēng)景圖片、人物相片作為背景圖片，要在背景圖片中添加（插入）一些內(nèi)容的時(shí)候。
像這樣的背景圖片，有三種處理方法。
（1）按照原圖片的規(guī)格設(shè)置背景圖片：
按照原圖片的規(guī)格設(shè)置背景圖片，背景圖片不會被剪切，也不會重復(fù)平鋪。
舉例：
這是我應(yīng)用css定位樣式在一個(gè)圖片上添加文字的作品。背景圖片應(yīng)用了原圖片規(guī)格，在圖片中我想添加文字的地方添加了文字。
原圖片如下：
（2）剪切原圖片的一部分：
例如：上面的那個(gè)圖片，左下角有文字，如果不喜歡，就剪切掉吧。其方法是：把背景圖片的高度設(shè)置得小一點(diǎn)。
你看看這篇的效果，圖片下部的文字剪切掉啦。
同樣的道理，只要把背景圖片的寬度設(shè)置得小一點(diǎn)，圖片的右部就能夠被剪切掉啦。在這里，我就不再舉例啦。
（3）重復(fù)平鋪原圖片：
設(shè)置背景圖片，可以重復(fù)平鋪原圖片。
如果背景圖片的高度大于原圖片的高度，背景圖片會繼續(xù)向下平鋪；如果背景圖片的寬度大于原圖片的寬度，背景圖片會繼續(xù)向右平鋪。
盡管這種方法也是設(shè)置背景圖片的一種方法，但是，制作“在背景圖片中添加（插入）一些內(nèi)容”的網(wǎng)頁，這種效果是很不理想的一種效果。因此，建議不應(yīng)用這種方法制作“在背景圖片中添加（插入）一些內(nèi)容”的網(wǎng)頁。
（二）只在水平方向平鋪：
背景圖片可以只在水平方向平鋪。
表達(dá)方式舉例：
style="BACKGROUND-REPEAT: repeat-x; BACKGROUND-POSITION: 0% 0%; HEIGHT: 106px"
應(yīng)用舉例：
這是我制作的一篇網(wǎng)頁。背景圖片可以只在水平方向平鋪，下面粘貼了歡迎新群友加入代碼學(xué)習(xí)群的《公告》。
（三）只在垂直方向平鋪：
表達(dá)方式舉例：
style="BACKGROUND-REPEAT: repeat-y; BACKGROUND-POSITION: 0% 0%; HEIGHT: 106px"
應(yīng)用舉例：
這是我制作的一篇網(wǎng)頁。背景圖片可以只在垂直方向平鋪，右面粘貼了歡迎新群友加入代碼學(xué)習(xí)群的《公告》。
（四）背景圖片不平鋪：
背景圖片不平鋪，就是背景圖片只顯示一次。
表達(dá)方式舉例：
style="BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: 50% 5%; HEIGHT: 200px"
應(yīng)用舉例：
這是我制作的一篇網(wǎng)頁。背景圖片不平鋪，只顯示了一次。在背景圖片的下面粘貼了歡迎新群友加入代碼學(xué)習(xí)群的《公告》。
大家已經(jīng)看到了，上面的幾處“表達(dá)方式”中，都用到了：BACKGROUND-REPEAT屬性。
BACKGROUND-REPEAT屬性，是規(guī)定如何設(shè)置背景圖片的。
BACKGROUND-REPEAT屬性的屬值為：repeat時(shí)，背景圖片在水平方向與垂直方向都平鋪。這是默認(rèn)值，可以缺省。
BACKGROUND-REPEAT屬性的屬值為：repeat-x時(shí)，背景圖片只在水平方向平鋪。
BACKGROUND-REPEAT屬性的屬值為：repeat-y時(shí)，背景圖片只在垂直方向平鋪。
BACKGROUND-REPEAT屬性的屬值為：no-repeat時(shí)，背景圖片不平鋪，也就是只顯示一次。
上面“表達(dá)方式”中的BACKGROUND-POSITION屬性，是設(shè)置背景圖片的起始位置的。它的屬值，也就是后面的兩個(gè)百分?jǐn)?shù)，第一個(gè)是水平方向的起始點(diǎn)，第二個(gè)是垂直方向的起始點(diǎn)。
最后面的高度，是背景圖片的高度，單位是px。
上面是我制作的一篇網(wǎng)頁?！疤彀查T花壇試燈迎國慶”的照片在8個(gè)移動小屏幕中無縫銜接，源源不斷地移動著，非常壯觀。
這種類型的網(wǎng)頁，是比較精細(xì)的網(wǎng)頁。網(wǎng)頁的整體布局以及每個(gè)細(xì)節(jié)，都要做到心中有數(shù)。制作要點(diǎn)如下：
1、表格標(biāo)簽中要設(shè)置css的相對定位樣式，移動屏幕中要設(shè)置css的絕對定位樣式，移動屏幕控制的表格，要設(shè)置背景圖片的插入點(diǎn)。
2、這片網(wǎng)頁，我設(shè)置了8個(gè)移動小屏幕。移動小屏幕的高度為600px（即：背景圖片的高度），寬度為100px，每兩個(gè)移動小屏幕之間間隔20px。8個(gè)移動小屏幕與7個(gè)間隔區(qū)域合起來的寬度為940px，因此，總表格的寬度設(shè)置為940px。
3、每個(gè)移動小屏幕的“居上值”為3px，是因?yàn)楸砀駱?biāo)簽中設(shè)置了寬度為3px的邊框線。8個(gè)移動小屏幕的“居左值”，從左到右依次為：2px，122px，242px，362px，482px，602px，722px，842px。
4、每個(gè)移動小屏幕控制的“表格”，設(shè)置了背景圖片，設(shè)置了背景圖片的插入點(diǎn)，設(shè)置了高度與寬度。表格的高度，也就是表格中背景圖片的高度。表格的寬度，可以任意設(shè)置。設(shè)置為多寬，背景圖片就從插入點(diǎn)開始，水平方向平鋪多寬。
背景圖片定位實(shí)例1是八個(gè)橫向的移動小屏幕，而這篇網(wǎng)頁是豎向的五個(gè)移動小屏幕。它們的區(qū)別在于：前者用的是一行八列的表格，背景圖片的插入點(diǎn)，垂直方向不變，水平方向是變化的；后者用的是五行一列的表格，背景圖片的插入點(diǎn)，水平方向不變，垂直方向是變化的。其它的設(shè)置方法，基本上是相同的。
綜上所述，本節(jié)教程講解了背景顏色與背景圖片的概念，背景顏色與背景圖片的表達(dá)方式，背景圖片的剪切與重復(fù)，背景圖片平鋪的幾種形式，背景圖片的定位插入點(diǎn)等內(nèi)容。用我制作的幾篇網(wǎng)頁，具體說明了背景圖片的設(shè)置方法。
本篇《教程》也是非常重要的一篇《教程》。學(xué)會設(shè)置背景圖片，你將會制作出許許多多的漂亮網(wǎng)頁來。
希望朋友們在學(xué)習(xí)這篇《教程》上要下點(diǎn)功夫，其中的難點(diǎn)部分，要反復(fù)閱讀，認(rèn)真揣摩。重在理解，重在制作，在制作的過程中，加深理解的深度，力求弄懂，力求會用。
作業(yè)：
一、填空：
1、“背景”是針對（）而言的?！氨尘啊钡淖饔檬怯脕恚ǎ┚W(wǎng)頁內(nèi)容，使我們制作的網(wǎng)頁更加漂亮，更加美觀。
2、用html代碼設(shè)置背景顏色，表達(dá)方式舉例：（），用html代碼設(shè)置背景顏色，一般用于（）標(biāo)簽。
3、用css樣式設(shè)置背景顏色，表達(dá)方式舉例：（），用css樣式設(shè)置背景顏色，可用于多種標(biāo)簽。例如：（）
4、用html代碼設(shè)置背景圖片，表達(dá)方式舉例：（）。
5、用css樣式設(shè)置背景圖片，表達(dá)方式舉例：（）。
6、背景圖片的平鋪有四種形式：（）、（）、（）、（）。
7、設(shè)置背景圖片：如果背景圖片的高度小于原圖片的高度，背景圖片會被剪切（）部；如果背景圖片的寬度小于原圖片的高度，背景圖片會被剪切（）部。
8、設(shè)置背景圖片：如果背景圖片的高度大于原圖片的高度，背景圖片會在（）部重復(fù)平鋪；如果背景圖片的寬度大于原圖片的寬度，背景圖片會在（）部重復(fù)平鋪。
9、BACKGROUND-REPEAT屬性，是規(guī)定（）背景圖片的。屬值為：repeat時(shí)，背景圖片在（）平鋪。這是（）值，可以（）。屬值為：repeat-x時(shí)，背景圖片只在（）平鋪。屬值為：repeat-y時(shí)，背景圖片只在（）平鋪。屬值為：no-repeat時(shí)，背景圖片（）平鋪，也就是只（）。
二、認(rèn)真觀察“背景圖片定位實(shí)例1”與“背景圖片定位實(shí)例2”的顯示效果。查看其代碼，體會我講解的“制作要點(diǎn)”。
“春天沒來”編撰
2014年7月1日于北京
