CSS中background屬性應(yīng)用
這里和大家重點(diǎn)描述一下CSS中background屬性應(yīng)用，比如背景顏色和圖片，背景圖片和背景顏色在HTML里面的設(shè)置也是基本相同的，都可以在里加入相關(guān)的語句來完成。
CSS中background屬性應(yīng)用
◆背景顏色background-color
我想這個(gè)我就不用多做介紹了，顏色代碼我想大家都知道的，不是用英文來代替就是用指定的代碼來表示的。這個(gè)的默認(rèn)值是transparent（透明色）。
例：
- body{background-color:yellow}
- H1{background-color:#000000}
◆背景圖片background-image
背景圖片和背景顏色在HTML里面的設(shè)置也是基本相同的，都可以在里加入相關(guān)的語句來完成。但是在這里，我所指的并非是用這種方法，我用的方法還是CSS。background-image這個(gè)的主要功能也就是用來顯示圖片，如果需要顯示圖片的話，那么只要在后面加上url(圖片的地址）就可以了，不顯示嘛，那是最簡(jiǎn)單不過的了，什么也不要就行了，因?yàn)檫@個(gè)默認(rèn)的就是none，而要加的話，就是在后面加上這個(gè)none就可以了。
例：
- body{background-image:url
- (file&:///C:/WINDOWS/BACKGRND.GIF)}
- h1{background-image:url(none)}
大家在使用里的背景圖片時(shí)，一定常常遇到一些圖片因?yàn)樘。a(chǎn)生種種如圖片的重復(fù)出現(xiàn)而破壞了整個(gè)頁面的美感，想換成其它圖片又不合適之類的麻煩情況吧。不過現(xiàn)在好了，大家只要用了以下的幾個(gè)CSS里控制圖片方法，那么你以后就不會(huì)再有此類的麻煩事發(fā)生了。
◆圖片是否重復(fù)顯示background-repeat
有時(shí)候重復(fù)顯示是需要的，可是有時(shí)候重復(fù)顯示則是讓人頭痛的，現(xiàn)在這個(gè)可以很好的幫助你了，而且它還可以幫你控制圖片重復(fù)的方式（水平方向重復(fù)、垂直方向重復(fù)以及兩個(gè)方向都有重復(fù)），而要實(shí)現(xiàn)這三個(gè)方向的重復(fù)也就只要在bcackground-repeat后面加上repeat-x（水平方向鋪開）、repeat-y（垂直方向鋪開）、repeat（兩個(gè)方向鋪開）。當(dāng)然，它可以控制圖片的重復(fù)，也可以控制圖片不重復(fù)的。no-repeat這個(gè)就是用來表示只顯示一幅背景圖片，而不是重復(fù)出現(xiàn)的，這個(gè)可不是默認(rèn)的喲，默認(rèn)的是重復(fù)顯示背景圖片（repeat）。
例：
- body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);
- background-repeat:no-repeat}
◆定位圖片顯示位置background-position
一張背景圖片經(jīng)過上面的設(shè)置后往往還不夠的，因?yàn)楫?dāng)你使用上面的不重復(fù)顯示設(shè)置后，圖片只顯示在頁面的左上角，而不會(huì)在其它地方，可是如果要在中間或者其它地方出現(xiàn)這張背景圖片的話，那么background-position這個(gè)就可以幫你了，因?yàn)樗褪怯脕盹@示圖片相對(duì)于左上角的一個(gè)位置的（就是默認(rèn)的值0%0%），由兩個(gè)值來設(shè)定，中間用空格來隔開。
它的主要的幾個(gè)值有l(wèi)eft|center|right和top|center|bottom，也可以用百分?jǐn)?shù)值指定相對(duì)位置或用一個(gè)值來指定絕對(duì)位置，如50%表示的位置是在中心，而50px的水平值則表示圖片距左上角區(qū)域水平移動(dòng)50px單位；
這里要特別指出的是：
1當(dāng)你設(shè)置值的時(shí)候只提供一個(gè)值，則相當(dāng)于只指定水平位置，垂直自動(dòng)設(shè)置為50%；
2當(dāng)你設(shè)置的值是負(fù)數(shù)的時(shí)候，則表示背景圖片超出邊界。
例：
- body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);
- background-repeat:no-repeat;
- background-position:100px10px}
#p#◆控制圖片是否滾動(dòng)background-attachment
上面的兩步可以幫你完成圖像的定位，可是這樣做好以后還不是***的，因?yàn)槿绻愕捻撁嬗袧L動(dòng)條的時(shí)候，那么你這張背景圖片就不會(huì)永遠(yuǎn)定位在那個(gè)位置了，如果想要圖片永遠(yuǎn)定位在那個(gè)位置，就只有讓這張圖片隨著頁面的內(nèi)容的滾動(dòng)而滾動(dòng)，這時(shí)background-attachment就可以幫你了你只要加入scroll（靜止）和fixed（滾動(dòng)）中的其中一個(gè)就可以了。當(dāng)然不是讓你亂加的，畢竟scroll是默認(rèn)的，也就是不讓圖片隨頁面的內(nèi)容而滾動(dòng)的。
例：
- body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);
- background-repeat:no-repeat;background-attachment:fixed}
好了，經(jīng)過以上這番設(shè)置后，我相信你的背景一定會(huì)更美的，但是過多的代碼往往可讀性很差，容易讓人產(chǎn)生錯(cuò)誤，所以在這里我要告訴大家的就是可以把以上的代碼全部加在一起使用，也就是說把以上相關(guān)的代碼加到background中。在把代碼加到background中的時(shí)候要在每個(gè)值中間加上空格來隔開，而且不要把背景顏色的代碼放在背景圖片的URL后面，以免圖片顯示不出來。
例：
- body{background:greenurl(file&:///C:/WINDOWS/BACKGRND.GIF)
- fixed100px50pxno-repeat}
***提醒一下大家，如果用代碼直接插入的話，那么一定要放下面這個(gè)代碼的里后再放在之間才能正常顯示出來！
接下來我再介紹一下用DW4制作以上樣式的方法，因?yàn)樵贒W中已經(jīng)很詳細(xì)的列出各項(xiàng)來了，具體的作用我也說明過了，所以就簡(jiǎn)要的介紹一下吧，只要大家能夠明白就行了。
1.在此之前大家應(yīng)該把CSSStyles這個(gè)窗口打開，如未打開的話，那么就按Shift+F11或者從Window下拉菜單中選擇此項(xiàng)就可以了。
2.點(diǎn)擊右鍵選擇newstyle...這個(gè)選項(xiàng)或者點(diǎn)擊下面的帶有+號(hào)的圖標(biāo)。
3.在彈出的窗口中的選擇如下，tag選擇body因?yàn)槲覀兩厦娼榻B的CSS樣式都是關(guān)于body的，而在這里我也只是介紹這個(gè)里面的background，其它的不要介紹內(nèi)容之內(nèi)；下面的type選擇第二個(gè)；define也選擇第二個(gè)，這樣你呆會(huì)就可以在該文件中的之間找到一個(gè)了，而這里面的內(nèi)容其實(shí)就是我上面介紹的。
4.點(diǎn)擊OK后彈出的窗口才是最重要的。我之前已說過，我們這次主要介紹的是background這個(gè)選項(xiàng)，所以在旁邊的窗口中選中它吧。選中以后右邊的窗口將會(huì)變成與它相關(guān)的設(shè)置項(xiàng)，具體的我在上面介紹過了，大家只要參照上面的介紹就可以完成了。不過需要說明一下的是在這個(gè)窗口中的最下面兩項(xiàng)其實(shí)就是background-position中的水平方向垂直方向。
5.***再點(diǎn)擊OK就可以完成了。完成后你就可以在該頁的代碼（View下的Code選項(xiàng)）中找到它們了。
【編輯推薦】
- CSS控制input樣式和懸停交互
- CSS中display:inline-block屬性妙用
- CSS中block和inline元素的差別
- 全面認(rèn)識(shí)CSS中margin屬性用法
- CSS代碼結(jié)構(gòu)中id及class類命名探究
