任務(wù)四-背景屬性

信息工程系教師：宇虹儒任務(wù)四

背景屬性項(xiàng)目五DIV+CSS創(chuàng)建網(wǎng)頁(yè)相關(guān)知識(shí)背景屬性1背景屬性網(wǎng)頁(yè)能通過(guò)背景圖像給讀者留下更深刻的印象，如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片來(lái)突出效果，所以在網(wǎng)頁(yè)設(shè)計(jì)中，合理控制背景顏色和背景圖像至關(guān)重要。設(shè)置背景顏色1在CSS中，網(wǎng)頁(yè)元素的背景顏色使用background-color屬性來(lái)設(shè)置background-color:背景顏色屬性顏色值，例：red、yellow#十六進(jìn)制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)實(shí)際工作中最常用#十六進(jìn)制色值，例：#ccc背景屬性設(shè)置背景圖像2在CSS中，還可以將圖像作為網(wǎng)頁(yè)元素的背景，通過(guò)background-image屬性實(shí)現(xiàn)。background-image:背景顏色屬性例如：body{background-color:#CCC;background-image:url(images/jianbian.jpg);}背景屬性背景與圖片不透明度的設(shè)置3通過(guò)引入RGBA模式和opacity屬性，可以設(shè)置圖片的不透明度。RGBA模式rgba(r,g,b,alpha);例如：使用RGBA模式為p元素指定透明度為0.5，顏色為紅色的背景。p{background-color:rgba(255,0,0,0.5);}背景屬性背景與圖片不透明度的設(shè)置3通過(guò)引入RGBA模式和opacity屬性，可以設(shè)置圖片的不透明度。opacity屬性opacity：opacityValue;opacity屬性用于定義元素的不透明度，參數(shù)opacityValue表示不透明度的值，它是一個(gè)介于0~1之間的浮點(diǎn)數(shù)值。其中，0表示完全透明，1表示完全不透明，而0.5則表示半透明。背景屬性設(shè)置背景圖像平鋪4默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望背景圖像平鋪，或者只沿著一個(gè)方向平鋪，可以通過(guò)background-repeat屬性來(lái)控制。background-repeat圖像平鋪屬性平鋪屬性值含義repeat沿水平和豎直兩個(gè)方向平鋪（默認(rèn)值）no-repeat不平鋪（圖像位于元素的左上角，只顯示一次）repeat-x只沿水平方向平鋪repeat-y只沿豎直方向平鋪背景屬性設(shè)置背景圖像位置5background-position圖像位置屬性位置屬性取值含義單位數(shù)值設(shè)置圖像左上角在元素中的坐標(biāo)，例如background-position:20px20px;預(yù)定義的關(guān)鍵字水平方向值：left、center、right。垂直方向值：top、center、bottom。百分比0%0%：圖像左上角與元素的左上角對(duì)齊。50%50%：圖像50%50%中心點(diǎn)與元素50%50%的中心點(diǎn)對(duì)齊。20%30%：圖像20%30%的點(diǎn)與元素20%30%的點(diǎn)對(duì)齊。100%100%：圖像右下角與元素的右下角對(duì)齊，而不是圖像充滿元素。背景屬性設(shè)置背景圖像固定6background-attachment圖像固定屬性固定屬性取值含義scroll圖像隨頁(yè)面元素一起滾動(dòng)（默認(rèn)值）。fixed圖像固定在屏幕上，不隨頁(yè)面元素滾動(dòng)。背景屬性設(shè)置背景圖像大小7background-size:屬性值1屬性值2;運(yùn)用CSS3中的background-size屬性可以輕松控制背景圖像的大小。屬性值說(shuō)

明像素值設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)默認(rèn)為auto；百分比以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)默認(rèn)為auto；cover把背景圖像擴(kuò)展至足夠大，使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中；contain把圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域；背景屬性設(shè)置背景的顯示區(qū)域8background-origin:屬性值;運(yùn)用CSS3中的background-origin屬性可以自行定義背景圖像的相對(duì)位置。在上面的語(yǔ)法格式中，background-origin屬性有三種取值，分別表示不同的含義，具體解釋如下。padding-box：背景圖像相對(duì)于內(nèi)邊距區(qū)域來(lái)定位。border-box：背景圖像相對(duì)于邊框來(lái)定位。content-box：背景圖像相對(duì)于內(nèi)容框來(lái)定位。背景屬性設(shè)置背景圖像的裁剪區(qū)域9background-clip:屬性值;在CSS樣式中，background-clip屬性用于定義背景圖像的裁剪區(qū)域在語(yǔ)法格式上，background-clip屬性和background-origin屬性的取值相似，但含義不同，具體解釋如下。border-box：默認(rèn)值，從邊框區(qū)域向外裁剪背景。padding-box：從內(nèi)邊距區(qū)域向外裁剪背景。content-box：從內(nèi)容區(qū)域向外裁剪背景。背景屬性設(shè)置多重背景圖像10在CSS3中，通過(guò)background-image、background-repeat、background-position和background-size等屬性提供多個(gè)屬性值可以實(shí)現(xiàn)多重背景圖像效果，各屬性值之間用逗號(hào)隔開(kāi)。例如：background-image:url(images/caodi.png),url(images/taiyang.png),url(images/tiankong.png);背景屬性背景復(fù)合屬性11CSS中的背景屬性也是一個(gè)復(fù)合屬性，可以將背景相關(guān)的樣式都綜合定義在一個(gè)復(fù)合屬性background中。background:[background-color][background-image][background-repeat][background-attachment][background-position][background-size][background-clip][background-origin];背景屬性多學(xué)一招：使用