Web前端開發(fā)項(xiàng)目教程主講人：卞孝麗1.1課程導(dǎo)論項(xiàng)目5美化傳統(tǒng)文化網(wǎng)任務(wù)5.1創(chuàng)作畫像展及圖片邊框

任務(wù)5.2添加創(chuàng)意漸變色與多重圖像背景目錄任務(wù)5.2添加創(chuàng)意漸變色與多重圖像背景【任務(wù)效果圖】

背景顏色、背景圖像、背景重復(fù)背景位置、背景附著【任務(wù)目標(biāo)】知識(shí)目標(biāo)掌握背景顏色、背景圖像、背景重復(fù)、背景位置、背景附著等背景屬性的設(shè)置方法。能力目標(biāo)

能夠使用單屬性及復(fù)合屬性綜合設(shè)置元素的背景顏色和圖像；能夠在網(wǎng)頁設(shè)計(jì)中為元素添加合適的背景效果以確定網(wǎng)站的風(fēng)格。素質(zhì)目標(biāo)

塑造專業(yè)自信；提升網(wǎng)頁制作中對(duì)頁面的美感和設(shè)計(jì)感的把握?！緦?dǎo)學(xué)知識(shí)】一、

背景顏色background-color屬性可以指定元素的背景色，顏色取值有多種方式。1.顏色名稱

比如藍(lán)色"blue"2.十六進(jìn)制值

藍(lán)色是"#0000ff"，可簡(jiǎn)寫為"#00f"3.RGB函數(shù)

rgb()中藍(lán)色是"0,0,255"...【導(dǎo)學(xué)知識(shí)】二、

背景圖像

1.添加背景圖像

背景不僅可以設(shè)置為某種顏色，還可以設(shè)置為某張圖像。在CSS中，通過background-image屬性可以實(shí)現(xiàn)將圖像作為網(wǎng)頁元素的背景。默認(rèn)情況下，圖像會(huì)重復(fù)，以覆蓋整個(gè)元素?！緦?dǎo)學(xué)知識(shí)】

如果某元素同時(shí)具有background-image和background-color屬性，那么background-image屬性將優(yōu)先于background-color屬性，也就是說背景圖片永遠(yuǎn)覆蓋于背景色之上，可以利用虛線邊框或是透明背景的圖像測(cè)試效果。只加背景顏色綠色：

p{width:300px;height:300px;border:20pxdottedred;background-color:green;}【導(dǎo)學(xué)知識(shí)】同時(shí)加背景圖片與背景顏色：

p{width:300px;height:300px;background-image:url(touxiang.jpeg);background-size:300px300px;border:20pxdottedred;background-color:green;}只加背景圖片：

p{width:300px;height:300px;background-image:url(touxiang.jpeg);background-size:300px300px;border:20pxdottedred;

}效果相同因?yàn)轭伾粔涸谙旅婵床坏健緦?dǎo)學(xué)知識(shí)】

選用不影響文字讀取的圖片做背景或是為文本添加底襯，利于辨識(shí)?！緦?dǎo)學(xué)知識(shí)】

不加文字底襯時(shí)，顏色深或比較鮮艷的背景圖會(huì)影響內(nèi)容的辨識(shí)度。【導(dǎo)學(xué)知識(shí)】二、

背景圖像2.控制背景圖像

（1）背景重復(fù)background-repeat

background-repeat屬性用來控制背景圖像的平鋪方式。默認(rèn)情況下，一幅背景圖像不足以占滿整個(gè)容器時(shí)，會(huì)在水平方向和垂直方向重復(fù)，以填滿整個(gè)容器?！緦?dǎo)學(xué)知識(shí)】●repeat：沿水平和垂直兩個(gè)方向（默認(rèn)值）；●no-repeat：不平鋪，即背景圖像只出現(xiàn)一次；●repeat-x：只沿水平方向平鋪；●repeat-y：只沿垂直方向平鋪；●round:自動(dòng)縮放直到適應(yīng)填充滿整個(gè)容器，如果是比較小的圖像在較大的區(qū)域中顯示，重復(fù)n次之后（x/y軸方向）如果剩余空間大于等于imgWidth*50%則重復(fù)第n+1次，否則拉伸已經(jīng)重復(fù)的背景圖（CSS3新增）；●space:在不縮放的前提下盡可能多的重復(fù)圖片，不足的空隙均分，以相同的間距平鋪，填充滿整個(gè)容器或某個(gè)方向（CSS3新增）。

若希望背景圖像只出現(xiàn)一次或只在某個(gè)方向上重復(fù)，可以取值no-repeat或repeat-x、repeat-y，background-repeat各屬性值及含義如下：【導(dǎo)學(xué)知識(shí)】二、

背景圖像2.控制背景圖像

（2）背景位置background-position

background-position屬性可以控制背景圖像的位置，比如讓背景圖像顯示在元素框的右上方可以設(shè)置背景位置屬性值為右上“background-position:righttop;”。默認(rèn)值是左上“l(fā)efttop”，第一個(gè)值是水平位置，第二個(gè)值是垂直位置，如果僅規(guī)定了一個(gè)關(guān)鍵詞，那么第二個(gè)值將是“center”，默認(rèn)值：topleft；還可以使用百分比（左上角是“0%0%”）或像素值（左上角是“00”，值為0時(shí)可以省略單位），如果僅規(guī)定了一個(gè)值，另一個(gè)值將是50%?！緦?dǎo)學(xué)知識(shí)】二、

背景圖像2.控制背景圖像

（3）背景附著background-attachment

background-attachment屬性指定背景圖像是應(yīng)該附著在元素上隨著元素一起滾動(dòng)（scroll，默認(rèn)），還是固定（fixed）在某一個(gè)位置，不隨頁面一起滾動(dòng)，實(shí)現(xiàn)控制背景圖像固定顯示在瀏覽器視口某個(gè)固定位置的效果。【任務(wù)小結(jié)】

除了背景顏色、背景圖像、背景重復(fù)、背景位置、背景附著這五個(gè)屬性之外，要想靈活控制背景所顯示的效果，還需要學(xué)習(xí)背