資源描述：
《使用CSS樣式表設(shè)置背景顏色與圖像.ppt》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、第九講使用CSS設(shè)置背景顏色與圖像回顧C(jī)SS中如何設(shè)置圖片代替文本？圖文混排中，使用哪個CSS屬性可以實現(xiàn)？CSS中剪切圖片的思路是如何呢？背景顏色給頁面分塊背景圖片的設(shè)置背景圖像替換滑動門技術(shù)的標(biāo)題背景綜合一：我的個人主頁背景綜合二：古詞《念奴嬌·赤壁懷古》本講目標(biāo)新知識導(dǎo)入對于做網(wǎng)頁的初學(xué)者可能更習(xí)慣于使用一些漂亮的圖片作為自己網(wǎng)頁的背景。但是，瀏覽一下大型的商業(yè)網(wǎng)站，你會發(fā)現(xiàn)他們更多運用的是白色、藍(lán)色、黃色等，使得網(wǎng)頁顯得典雅，大方和溫馨。更重要的是，這樣可以大大加快瀏覽者打開網(wǎng)頁的速度。常用的淺色案例一般來說，網(wǎng)頁的背景色應(yīng)該柔和一些、素一些、淡一些，再配上深色的
2、文字，使人看起來自然、舒暢。而為了追求醒目的視覺效果，可以為標(biāo)題使用較深的顏色。網(wǎng)頁顏色原理和象征意義我們所有網(wǎng)頁上顏色，在HTML下看到的是以顏色英文單詞或者十六進(jìn)制的表示方法（如#000000表示為黑色）。不同的顏色有著不同的含義，給人各種豐富的感覺和聯(lián)想。紅色---是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動，憤怒，熱情，活力的感覺。綠色---介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。?它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。橙色---也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時尚的效果。黃色---具有快樂，希望，智慧和輕快的個性，它的明度
3、最高。藍(lán)色---是最具涼爽，清新，專業(yè)的色彩。它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛(象天空的色彩)黑色---具有深沉，神秘，寂靜，悲哀，壓抑的感受。灰色---具有中庸，平凡，溫和，謙讓，中立和高雅的感覺。白色---具有潔白，明快，純真，清潔的感受。網(wǎng)頁顏色的使用風(fēng)格1、公司色 在現(xiàn)在企業(yè)中，公司的CI形象顯得尤其重要，每一個公司的CI設(shè)計必然要有標(biāo)準(zhǔn)的顏色。比如新浪網(wǎng)的主色調(diào)是一種介于淺黃和深黃之間的顏色，同時形象宣傳、海報、廣告使用的顏色都和網(wǎng)站的顏色一致。再比如國富投資公司的主色調(diào)是C：100%，M：60%，Y：0%，K：0%。這樣的顏色使用到網(wǎng)站上顯得色調(diào)
4、自然、底蘊(yùn)深厚。2、風(fēng)格色 許多網(wǎng)站使用顏色秉承的是公司的風(fēng)格。比如海爾使用的顏色是一種中性的綠色，即充滿朝氣有不失自己的創(chuàng)新精神。女性網(wǎng)站使用粉紅色的較多，大公司使用藍(lán)色的較多……這些都是在突出自己的風(fēng)格。3、習(xí)慣色 這些網(wǎng)站的顏色使用很大一部分是憑自己的個人愛好，以個人網(wǎng)站較多使用，比如自己喜歡紅色、紫色、黑色等，在做網(wǎng)站的時候就傾向于這種顏色。每一個人都有自己喜歡的顏色，因此這種類型稱為習(xí)慣色。案例演示背景色給頁面分塊查看源代碼背景圖片的重復(fù)使用CSS為頁面添加背景圖片的方法，使用屬性background-imagebackground-image:url(
5、bg1.jpg);/*背景圖片*/background-repeat:repeat-y;/*垂直方向重復(fù)*/案例演示1案例演示2案例演示3案例演示4背景圖片的位置發(fā)現(xiàn)：無論網(wǎng)頁如何拉伸，樓房的背景圖片一直處于頁面的右下角，那么將如何設(shè)置呢？查看源代碼添加多個背景圖片由于在CSS中，一個標(biāo)記只能使用一次background屬性，若想添加多個背景，只有給多個標(biāo)記添加不同背景來實現(xiàn)查看源代碼背景樣式的縮寫background-color:blue;background-image:url(bg1.jpg);background-repeat:repeat-y;backgroun
6、d-attachment:fixed;background-position:5px10px;background:blueurl(bg1.jpg)repeat-yfixed5px10px;嚴(yán)格來說沒什么順序之分，但推薦一定的次序有利于代碼修改和閱讀：顏色、背景圖片、是否重復(fù)、是否固定、如何定位標(biāo)題的圖像替換素材準(zhǔn)備參考代碼滑動門技術(shù)的標(biāo)題效果：我們看到上述兩行，背景圖片可長可短，就像滑動門似的。用途：常用于標(biāo)題或?qū)Ш?。參考代碼背景綜合一：我的個人主頁查看源代碼背景綜合二：古詞《念奴嬌·赤壁懷古》查看源代碼千里之行始于足下17
