背景
由來
看到XP的經(jīng)典背景鞭衩，有人會認(rèn)為要講XP的內(nèi)容，其實不然射赛，我們下面講的與XP無關(guān)多柑，講的是HTML頁面的CSS背景基礎(chǔ)知識。(只是借用這張經(jīng)典圖片楣责，使背景不在陌生竣灌。)
一般body背景都是用大圖或者圖片擴(kuò)展聂沙，效果無非有二，這兩種方式是以前很流行的〕踵冢現(xiàn)在及汉，在扁平化流行的情況下，很多網(wǎng)站已經(jīng)不使用這種大圖片背景了削樊。但是還有一些老牌網(wǎng)站和政府機(jī)關(guān)網(wǎng)站還在使用豁生。其實實現(xiàn)很簡單，讓我們學(xué)一下吧漫贞。
說明
下文代碼中使用如下目錄結(jié)構(gòu)
Web前端項目
├─index.html
│
├─css
│ └─style.css
│
└─res
└─背景.png
所以甸箱，CSS代碼中的圖片相對路徑是從css文件夾下style.css開始算起的，先到上一級迅脐，再到img文件夾下芍殖。所以使用../img/這個目錄。
固定背景
背景不隨文本移動谴蔑，例如百度背景豌骏。
- 設(shè)置背景圖片
background-image:url(../img/背景.png);
- 設(shè)置背景平鋪模式
一般固定背景是不平鋪no-repeat的。
background-repeat:no-repeat;
- 固定背景
background-attachment:fixed;
以上三步可以在一條聲明中完成：
background:url(../img/背景.png) no-repeat fixed;
不固定背景
背景隨文字移動隐锭，這種背景一般使用顏色漸變的方式窃躲，使背景無限延伸。例如新浪微博背景钦睡。
- 設(shè)置背景圖片
background-image:url(../img/背景.png);
- 設(shè)置背景平鋪模式
簡單背景一般只作成一個圖片條蒂窒，使用水平平鋪repeat-x，把背景平鋪開來荞怒。
background-repeat:repeat-x;
稍微復(fù)雜一點的背景只是在背景的開始使用一張圖片洒琢。背景是不平鋪的，代碼如下：
background-repeat:no-repeat;
- 設(shè)置背景的顏色
因為背景不是固定的褐桌，當(dāng)文本的高度超過背景圖片的時候衰抑，添加背景色使背景看上去連續(xù)，所以背景圖片在尾部使用漸變色處理荧嵌。
background-color:#f5f5f5;
以上三步可以在一條聲明中完成：
background: #f5f5f5 url(../img/背景.png) repeat-x;
