CSS背景顏色 背景圖片 居中 重復 固定樣式background經驗篇_第1頁
CSS背景顏色 背景圖片 居中 重復 固定樣式background經驗篇_第2頁
CSS背景顏色 背景圖片 居中 重復 固定樣式background經驗篇_第3頁
CSS背景顏色 背景圖片 居中 重復 固定樣式background經驗篇_第4頁
CSS背景顏色 背景圖片 居中 重復 固定樣式background經驗篇_第5頁
免費預覽已結束，剩余1頁可下載查看

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、.CSS背景顏色 背景圖片 居中 重復 固定樣式background經驗篇Background CSS背景圖片與CSS背景顏色樣式技術經驗篇我們使用CSS Background樣式屬性，可以設置網頁背景單一顏色、網頁背景為圖片、網頁背景圖片居中于網頁、網頁背景圖片網頁固定位置、網頁背景圖片中網頁中重復平鋪等css背景樣式介紹與案例講解。擴展閱讀：CSS背景Background基礎：背景顏色背景圖片目錄1. CSS背景background圖片2. CSS背景顏色3. 背景為顏色與為圖片總結一、CSS背景background圖片  1、背景圖片語法background-imag

2、e:url() 引入背景圖片background-repeat:no-repeat 設置背景圖片是否重復平鋪background-position:left top 設置圖片的css背景定位，left代表靠左，top代表靠上簡寫背景圖片語法：background:url(圖片地址) no-repeat left top2、背景圖片設置Bodybackground:url( no-repeat 0 0 這里設置了圖片“3、CSS背景圖居中橫向居中：background:url(圖片地址) no-repeat center top縱向居中：background:url(圖片地址) no-repea

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

4、-x案例截圖：Y軸橫向平鋪圖片背景截圖7、背景圖片縱向平鋪CSS背景Y縱向平鋪代碼：bodybackground:url( repeat-y平鋪重復圖片背景效果截圖：縱向Y軸方向垂直平鋪圖片背景截圖8、全網頁背景圖片重復平鋪圖片背景全屏網頁重復平鋪關鍵代碼：bodybackground:url(截圖：圖片作為背景全屏平鋪顯示截圖說明：這里沒有設置是否重復，是否居左居右，只設置背景引入圖片即可簡便地實現圖片自然全屏平鋪二、CSS背景顏色  1、background背景顏色語法background:#FFF.divcss5background:#FFF設置了divcss5對象背景為白色2

5、、背景顏色案例假如我們設置網頁背景全部為白色，文字顏色為白色1）、對應背景顏色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設置背景顏色與CSS字體顏色如果想了解CSS背景顏色與CSS圖片背景同時設置background基礎進入：三、背景為顏色與為圖片總結   我們使用css backgroun

溫馨提示

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

評論

0/150

提交評論