CSS設(shè)置網(wǎng)頁(yè)中的背景.ppt

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

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

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

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

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

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