




下載本文檔
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
1、.CSS背景顏色 背景圖片 居中 重復(fù) 固定樣式background經(jīng)驗篇Background CSS背景圖片與CSS背景顏色樣式技術(shù)經(jīng)驗篇我們使用CSS Background樣式屬性,可以設(shè)置網(wǎng)頁背景單一顏色、網(wǎng)頁背景為圖片、網(wǎng)頁背景圖片居中于網(wǎng)頁、網(wǎng)頁背景圖片網(wǎng)頁固定位置、網(wǎng)頁背景圖片中網(wǎng)頁中重復(fù)平鋪等css背景樣式介紹與案例講解。擴展閱讀:CSS背景Background基礎(chǔ):背景顏色背景圖片目錄1. CSS背景background圖片2. CSS背景顏色3. 背景為顏色與為圖片總結(jié)一、CSS背景background圖片 1、背景圖片語法background-imag
2、e:url() 引入背景圖片background-repeat:no-repeat 設(shè)置背景圖片是否重復(fù)平鋪background-position:left top 設(shè)置圖片的css背景定位,left代表靠左,top代表靠上簡寫背景圖片語法:background:url(圖片地址) no-repeat left top2、背景圖片設(shè)置Bodybackground:url( no-repeat 0 0 這里設(shè)置了圖片“3、CSS背景圖居中橫向居中:background:url(圖片地址) no-repeat center top縱向居中:background:url(圖片地址) no-repea
3、t left 50%這里50%是隨意設(shè)置考上為50%距離,細節(jié)具體上下垂直居中需要再通過百分比均衡設(shè)置。4、背景圖片一般案例Body設(shè)置網(wǎng)頁背景css代碼bodybackground:url( no-repeat 0 0CSS圖片背景案例截圖不重復(fù)也不平鋪圖片背景截圖5、div css背景圖片居中Css背景圖片居中代碼:bodybackground:url( no-repeat center 0這里我們用了“center ”居中屬性,更多詳情可進入css 背景了解基礎(chǔ)居中截圖背景圖片居中于網(wǎng)頁截圖6、背景圖片橫向平鋪CSS背景X橫向平鋪代碼:bodybackground:url( repeat
4、-x案例截圖:Y軸橫向平鋪圖片背景截圖7、背景圖片縱向平鋪CSS背景Y縱向平鋪代碼:bodybackground:url( repeat-y平鋪重復(fù)圖片背景效果截圖:縱向Y軸方向垂直平鋪圖片背景截圖8、全網(wǎng)頁背景圖片重復(fù)平鋪圖片背景全屏網(wǎng)頁重復(fù)平鋪關(guān)鍵代碼:bodybackground:url(截圖:圖片作為背景全屏平鋪顯示截圖說明:這里沒有設(shè)置是否重復(fù),是否居左居右,只設(shè)置背景引入圖片即可簡便地實現(xiàn)圖片自然全屏平鋪二、CSS背景顏色 1、background背景顏色語法background:#FFF.divcss5background:#FFF設(shè)置了divcss5對象背景為白色2
5、、背景顏色案例假如我們設(shè)置網(wǎng)頁背景全部為白色,文字顏色為白色1)、對應(yīng)背景顏色CSS代碼與HTML源代碼:1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5. <title>無標題文檔</title> 6. &l
6、t;style> 7. bodybackground:#000; color:#FFF 8. </style> 9. </head> 10. <body> 11. DIVCSS5 背景為黑色;文字顏色為白色 12. </body> 13. </html> 2)、背景顏色與文字顏色案例截圖CSS設(shè)置背景顏色與CSS字體顏色如果想了解CSS背景顏色與CSS圖片背景同時設(shè)置background基礎(chǔ)進入:三、背景為顏色與為圖片總結(jié) 我們使用css backgroun
溫馨提示
- 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)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 統(tǒng)編版三年級語文下冊第三單元達標測試卷(含答案)
- 2019-2025年軍隊文職人員招聘之軍隊文職法學(xué)題庫檢測試卷A卷附答案
- 2019-2025年消防設(shè)施操作員之消防設(shè)備基礎(chǔ)知識題庫練習(xí)試卷B卷附答案
- 2019-2025年軍隊文職人員招聘之軍隊文職管理學(xué)與服務(wù)通關(guān)提分題庫及完整答案
- 2025年軍隊文職人員招聘之軍隊文職教育學(xué)題庫檢測試卷A卷附答案
- 初二壓強物理試題及答案
- 螺螄粉專業(yè)知識培訓(xùn)課件
- 2025年大學(xué)生防詐騙知識競賽題庫及答案(一)
- 從愚公移山看堅持與毅力作文
- 《初識高中物理實驗:運動與力的教學(xué)計劃》
- 裝修工程竣工驗收自評報告
- 陽臺裝修合同
- MULAND深圳蕉內(nèi)前海中心辦公室方案
- 基于三菱FX系列PLC的五層電梯控制系統(tǒng)
- 溫室韭菜收割機設(shè)計學(xué)士學(xué)位論文
- 女性私密健康
- 思想道德與法治知到章節(jié)答案智慧樹2023年寧波大學(xué)
- 農(nóng)田土地翻耕合同
- 鐵路混凝土工程施工質(zhì)量驗收標準(TB 10424-2018 )培訓(xùn)教材
- 2023年全國醫(yī)學(xué)博士英語統(tǒng)考真題及參考答案
- 浙江新聞獎副刊類參評作品推薦表
評論
0/150
提交評論