福彩幸运武林开奖 ?
歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > CSS技巧 >

CSS背景顏色 背景圖片 居中 重復 固定樣式background經驗篇

Background CSS背景圖片CSS背景顏色樣式技術經驗篇

我們使用CSS Background樣式屬性,可以設置網頁背景單一顏色、網頁背景為圖片、網頁背景圖片居中于網頁、網頁背景圖片網頁固定位置、網頁背景圖片中網頁中重復平鋪等css背景樣式介紹與案例講解。

擴展閱讀CSS背景Background基礎http://www.mcowk.com.cn/rumen/r125.shtml

背景顏色背景圖片目錄
  1. CSS背景background圖片
  2. CSS背景顏色
  3. 背景為顏色與為圖片總結

一、CSS背景background圖片   -   TOP

1、背景圖片語法
background-image:url() 引入背景圖片
background-repeat:no-repeat 設置背景圖片是否重復平鋪
background-position:left top 設置圖片的css背景定位,left代表靠左,top代表靠上

簡寫背景圖片語法:
background:url(圖片地址) no-repeat left top

2、背景圖片設置
Body{background:url(http://www.mcowk.com.cn/img201301/divcss5-logo-2013.gif) no-repeat 0 0 }
這里設置了圖片“http://www.mcowk.com.cn/img201301/divcss5-logo-2013.gif”作為網頁背景不重復并靠上靠左顯示。,

3、CSS背景圖居中

橫向居中:
background:url(圖片地址) no-repeat center top

縱向居中:
background:url(圖片地址) no-repeat left 50%
這里50%是隨意設置考上為50%距離,細節具體上下垂直居中需要再通過百分比均衡設置。

4、背景圖片一般案例
Body設置網頁背景css代碼
body{background:url(http://www.mcowk.com.cn/img201301/divcss5-logo-2013.gif) no-repeat 0 0}

CSS圖片背景案例截圖

普通CSS背景圖片設置截圖
不重復也不平鋪圖片背景截圖

5、div css背景圖片居中
Css背景圖片居中代碼:
body{background:url(http://www.mcowk.com.cn/img201301/divcss5-logo-2013.gif) no-repeat center 0}
這里我們用了“center ”居中屬性,更多詳情可進入css 背景了解基礎

居中截圖

背景圖片樣式設置截圖
背景圖片居中于網頁截圖

6、背景圖片橫向平鋪

CSS背景X橫向平鋪代碼:
body{background:url(http://www.mcowk.com.cn/img201301/divcss5-logo-2013.gif) repeat-x}

案例截圖:

CSS背景應用截圖
Y軸橫向平鋪圖片背景截圖

7、背景圖片縱向平鋪

CSS背景Y縱向平鋪代碼:
body{
background:url(http://www.mcowk.com.cn/img201301/divcss5-logo-2013.gif) repeat-y
}

平鋪重復圖片背景效果截圖:

背景圖片重復平鋪設置案例截圖
縱向Y軸方向垂直平鋪圖片背景截圖

8、全網頁背景圖片重復平鋪

圖片背景全屏網頁重復平鋪關鍵代碼:
body{background:url(http://www.mcowk.com.cn/img201301/divcss5-logo-2013.gif)}

截圖:

全屏重復平鋪網頁背景圖片
圖片作為背景全屏平鋪顯示截圖

說明:這里沒有設置是否重復,是否居左居右,只設置背景引入圖片即可簡便地實現圖片自然全屏平鋪

二、CSS背景顏色   -   TOP

1、background背景顏色語法

background:#FFF
.divcss5{background:#FFF}

設置了divcss5對象背景為白色

2、背景顏色案例

假如我們設置網頁背景全部為白色,文字顏色為白色

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. <style> 
  7. body{background:#000; color:#FFF} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. DIVCSS5 背景為黑色;文字顏色為白色 
  12. </body> 
  13. </html> 

2)、背景顏色與文字顏色案例截圖

CSS背景顏色應用案例截圖
CSS設置背景顏色與CSS字體顏色

如果想了解CSS背景顏色與CSS圖片背景同時設置background基礎進入:http://www.mcowk.com.cn/rumen/r125.shtml

三、背景為顏色與為圖片總結   -   TOP

我們使用css background設置圖片為網頁背景,圖片為網頁背景各種樣式,包括了是否背景圖片居中,是否背景圖片重復平鋪顯示、是否固定背景圖片位置等背景樣式,以上知識點與案例點希望大家自己復制以上代碼實踐觀察即可掌握。

擴展閱讀
CSS文字顏色
CSS字體顏色
CSS背景
CSS background

如需轉載,請注明文章出處和來源網址:http://www.mcowk.com.cn/jiqiao/j369.shtml

我要分享到:

必備CSS教程 Essential CSS Tutorials

必備HTML基礎教程 Essential HTML Tutorials

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2013-01-23 20:23 原創:DIVCSS5
本文www.mcowk.com.cn DIVCSS5版權所有。

福彩幸运武林开奖