CSS背景顏色 背景圖片 居中 重復(fù) 固定樣式background經(jīng)驗(yàn)篇_第1頁(yè)
CSS背景顏色 背景圖片 居中 重復(fù) 固定樣式background經(jīng)驗(yàn)篇_第2頁(yè)
CSS背景顏色 背景圖片 居中 重復(fù) 固定樣式background經(jīng)驗(yàn)篇_第3頁(yè)
CSS背景顏色 背景圖片 居中 重復(fù) 固定樣式background經(jīng)驗(yàn)篇_第4頁(yè)
CSS背景顏色 背景圖片 居中 重復(fù) 固定樣式background經(jīng)驗(yàn)篇_第5頁(yè)
已閱讀5頁(yè),還剩1頁(yè)未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、CSS背景顏色 背景圖片 居中 重復(fù) 固定樣式background經(jīng)驗(yàn)篇Background CSS背景圖片與CSS背景顏色樣式技術(shù)經(jīng)驗(yàn)篇我們使用CSS Background樣式屬性,可以設(shè)置網(wǎng)頁(yè)背景單一顏色、網(wǎng)頁(yè)背景為圖片、網(wǎng)頁(yè)背景圖片居中于網(wǎng)頁(yè)、網(wǎng)頁(yè)背景圖片網(wǎng)頁(yè)固定位置、網(wǎng)頁(yè)背景圖片中網(wǎng)頁(yè)中重復(fù)平鋪等css背景樣式介紹與案例講解。擴(kuò)展閱讀:CSS背景Background基礎(chǔ):背景顏色背景圖片目錄1. CSS背景background圖片2. CSS背景顏色3. 背景為顏色與為圖片總結(jié)一、CSS背景background圖片  1、背景圖片語(yǔ)法background-image

2、:url() 引入背景圖片background-repeat:no-repeat 設(shè)置背景圖片是否重復(fù)平鋪background-position:left top 設(shè)置圖片的css背景定位,left代表靠左,top代表靠上簡(jiǎn)寫背景圖片語(yǔ)法: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-repeat

3、 left 50%這里50%是隨意設(shè)置考上為50%距離,細(xì)節(jié)具體上下垂直居中需要再通過百分比均衡設(shè)置。4、背景圖片一般案例Body設(shè)置網(wǎng)頁(yè)背景css代碼bodybackground:url( no-repeat 0 0CSS圖片背景案例截圖不重復(fù)也不平鋪圖片背景截圖5、div css背景圖片居中Css背景圖片居中代碼:bodybackground:url( no-repeat center 0這里我們用了“center ”居中屬性,更多詳情可進(jìn)入css 背景了解基礎(chǔ)居中截圖背景圖片居中于網(wǎng)頁(yè)截圖6、背景圖片橫向平鋪CSS背景X橫向平鋪代碼:bodybackground:url( repeat-

4、x案例截圖:Y軸橫向平鋪圖片背景截圖7、背景圖片縱向平鋪CSS背景Y縱向平鋪代碼:bodybackground:url( repeat-y平鋪重復(fù)圖片背景效果截圖:縱向Y軸方向垂直平鋪圖片背景截圖8、全網(wǎng)頁(yè)背景圖片重復(fù)平鋪圖片背景全屏網(wǎng)頁(yè)重復(fù)平鋪關(guān)鍵代碼:bodybackground:url(截圖:圖片作為背景全屏平鋪顯示截圖說(shuō)明:這里沒有設(shè)置是否重復(fù),是否居左居右,只設(shè)置背景引入圖片即可簡(jiǎn)便地實(shí)現(xiàn)圖片自然全屏平鋪二、CSS背景顏色  1、background背景顏色語(yǔ)法background:#FFF.divcss5background:#FFF設(shè)置了divcss5對(duì)象背景為白色2、

5、背景顏色案例假如我們?cè)O(shè)置網(wǎng)頁(yè)背景全部為白色,文字顏色為白色1)、對(duì)應(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>無(wú)標(biāo)題文檔</title> 6. <

6、;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í)設(shè)置background基礎(chǔ)進(jìn)入:三、背景為顏色與為圖片總結(jié)   我們使用css backgrou

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論