1、1,第4章 CSS設(shè)置網(wǎng)頁中的背景,2,學(xué)習(xí)目標(biāo),掌握CSS設(shè)置網(wǎng)頁背景的方法。 ppt中所有實例參考網(wǎng)頁設(shè)計與制作電子教材及源代碼,3,4.1 CSS設(shè)置背景顏色,4.1.1 頁面背景色 4.1.2 用背景色給頁面分塊,4,4.1.1 頁面背景色,在HTML中，設(shè)置網(wǎng)頁的背景顏色是利用標(biāo)記的bgcolor屬性，而在CSS中頁面的背景顏色通過設(shè)置標(biāo)記的background-color屬性來實現(xiàn)。 如文件Sample4-1.html所示：,5,4.1.2 用背景色給頁面分塊,在H在CSS中background-color屬性不僅可以設(shè)置頁面的背景色，還可以用于各種網(wǎng)頁元素，如果給一個標(biāo)題設(shè)置背景

2、，可以如下設(shè)置： h1 font-family:黑體； color:white; /* 設(shè)置標(biāo)題文字顏色 */ background-color:blue; /* 設(shè)置標(biāo)題背景顏色 */ 因此很多網(wǎng)頁都通過設(shè)定不同的HTML元素的各種背景色來實現(xiàn) 分塊的目的。 如文件Sample4-2.html所示：,6,4.2 設(shè)置背景圖像,4.2.1 頁面的背景圖像 4.2.2背景圖像的重復(fù) 4.3.3設(shè)置背景圖像的位置 4.3.4固定背景圖像位置 4.3.5背景樣式綜合設(shè)置,7,4.2.1 頁面的背景圖像,在CSS中給頁面添加背景是通過給標(biāo)記設(shè)置background-image屬性，直接定義其url值來

3、實現(xiàn)，其中url值可以是網(wǎng)站的絕對路徑，也可以是相對路徑。 如文件Sample4-3.html所示： 背景圖片 ,背景圖像是透明的GIF格式圖像(2.gif)，如果同時設(shè)置頁面背景顏色background-color,則背景會透過圖像的透明部分，與圖像同時產(chǎn)生效果。,8,4.2.2背景圖像的重復(fù),在上例中，背景圖像都是直接重復(fù)地鋪滿整個頁面，即圖像自動沿水平和垂直兩個方向平鋪。實際上在CSS中可以通過background-repeat屬性設(shè)置圖像的重復(fù)方式，包括水平重復(fù)、垂直重復(fù)和不重復(fù)。 其屬性值有： reapeat：沿水平和垂直兩個方向平鋪，默認(rèn)值 no-reapeat:不平鋪 repea

4、t-x： 水平方向重復(fù) repeat-y： 垂直方向重復(fù) 缺省值為repeat 如文件Sample4-4.html所示：,9,4.3.3設(shè)置背景圖像的位置,在背景圖像設(shè)為不平鋪情況下背景圖像將顯示在頁面元素的左上角。如果不希望這樣，在CSS中可以設(shè)置background-position屬性設(shè)置圖像的位置。 如文件Sample4-5.html所示： background-position的值有：垂直位置vertical，指定top, center, bottom和具體數(shù)值、百分比；水平位置horizontal，指定left, center, right和具體數(shù)值、百分比。定義背景圖像的絕對或相

5、對位置顯示。 例如： background-position的值可以設(shè)置為top left、top center、top right、center left、center right、bottom right、等等。 background-position: 20px 50px;,10,4.3.4固定背景圖像位置,對于大幅的背景圖像，當(dāng)瀏覽器出現(xiàn)滾動條時，通常不希望圖像隨著文字的移動，而是固定在一個位置。在CSS中可以通過設(shè)置background-attachment屬性來實現(xiàn)。 其屬性值有：scroll（隨對象一起滾動）, fixed（固定），缺省值為scroll。該屬性指定對象的背景圖像是

6、否與對象一起滾動，或是固定在頁面上的某一個位置。這個屬性與background-image組合使用。,11,4.3.5背景樣式綜合設(shè)置,與border和font屬性一樣，background也可以將各種關(guān)于背景的設(shè)置集成到一條語句上如下： background-image:url(bg5.jpg);/* 背景圖片 */ background-color:blue; background-repeat:no-repeat;/* 不重復(fù) */ background-attachment:fixed background-position:300px 25px;/* 背景位置，具體數(shù)值 */ 可以寫成下面的形式： background: url(bg5.jpg) blue no-re