版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
1、1,第4章 CSS設(shè)置網(wǎng)頁中的背景,2,學(xué)習(xí)目標,掌握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)頁的背景顏色是利用標記的bgcolor屬性,而在CSS中頁面的背景顏色通過設(shè)置標記的background-color屬性來實現(xiàn)。 如文件Sample4-1.html所示:,5,4.1.2 用背景色給頁面分塊,在H在CSS中background-color屬性不僅可以設(shè)置頁面的背景色,還可以用于各種網(wǎng)頁元素,如果給一個標題設(shè)置背景
2、,可以如下設(shè)置: h1 font-family:黑體; color:white; /* 設(shè)置標題文字顏色 */ background-color:blue; /* 設(shè)置標題背景顏色 */ 因此很多網(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中給頁面添加背景是通過給標記設(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:沿水平和垂直兩個方向平鋪,默認值 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固定背景圖像位置,對于大幅的背景圖像,當瀏覽器出現(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
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- ppp項目投標合同模板
- 2024年山西駕駛員客運資格證考試試題及答案
- 2024年玉溪小型客運從業(yè)資格證理論考題
- 2024年北京客運考試口訣是什么意思
- 2024年南昌客運從業(yè)資格證下載app
- 家電設(shè)備購買合同協(xié)議書
- 公司資產(chǎn)合同模板
- 天津綠化報價合同模板
- 農(nóng)產(chǎn)品分紅合同模板
- 公司和政府合作合同模板
- 鋼棧橋施工方案改
- 精選浙江省普通高中生物學(xué)科教學(xué)指導(dǎo)意見(2023版)
- 高中語文 選修中冊 第八課時
- 修井作業(yè)操作規(guī)程完整
- 學(xué)校年度師德考核實施方案
- 電控柜技術(shù)規(guī)范
- 組織績效與全員績效管理方案
- NADH 氧化酶(NOX)活性檢測試劑盒說明書-可見分光光度法UPLC-MS-4350
- 03291人際關(guān)系學(xué)復(fù)習(xí)資料
- 咳嗽的中醫(yī)護理-課件
- 做一個有溫度的護士課件
評論
0/150
提交評論