【簡(jiǎn) 介】

我想大家常常為一些比較合適于自己的網(wǎng)頁(yè)背景的圖片而發(fā)愁吧，這個(gè)我想也是有的，因?yàn)檫@些圖片不是太大就是太小，或者太亂，那么有沒(méi)有辦法讓圖片能合自己的主頁(yè)的胃口呢？答案是肯定的。

想知道怎么來(lái)實(shí)現(xiàn)嘛，好吧，大家現(xiàn)在開(kāi)始跟著我做，我保證大家一定一學(xué)就會(huì)。不過(guò)，我想在網(wǎng)上“成家”的朋友一般分為在網(wǎng)吧里“開(kāi)業(yè)”（就像我一樣，剛開(kāi)始從他人的主頁(yè)拉相關(guān)的代碼來(lái)改的），還有就是在自己家里用DW或FP之類(lèi)的專業(yè)軟件制作好上傳的，所以呢，我打算分開(kāi)兩步介紹，首先為在網(wǎng)吧里“開(kāi)業(yè)”的朋友著想吧，最后再簡(jiǎn)要的介紹一些用DW4做的背景樣式。

其實(shí)總得說(shuō)來(lái)一切都是一樣的，只不過(guò)是采用的方式不同罷了。好了閑話少說(shuō)了，現(xiàn)在就入正題吧。

說(shuō)到背景也就只有背景顏色和顏色圖片，這兩個(gè)我想大家一定都知道在里加入bgcolor="#808080"和background="URL"對(duì)吧，可是我這里將要介紹不是這樣做的，而是用CSS樣式來(lái)做的，雖說(shuō)有些麻煩，可是整體配合還是非常不錯(cuò)的。

·背景顏色 background-color

我想這個(gè)我就不用多做介紹了，顏色代碼我想大家都知道的，不是用英文來(lái)代替就是用指定的代碼來(lái)表示的。這個(gè)的默認(rèn)值是transparent（透明色）。 例：body{background-color:yellow} H1{background-color:#000000}

·背景圖片 background-image

背景圖片和背景顏色在HTML里面的設(shè)置也是基本相同的，都可以在里加入相關(guān)的語(yǔ)句來(lái)完成。但是在這里，我所指的并非是用這種方法，我用的方法還是CSS。background-image這個(gè)的主要功能也就是用來(lái)顯示圖片，如果需要顯示圖片的話，那么只要在后面加上url(圖片的地址）就可以了，不顯示嘛，那是最簡(jiǎn)單不過(guò)的了，什么也不要就行了，因?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)樘?，而產(chǎn)生種種如圖片的重復(fù)出現(xiàn)而破壞了整個(gè)頁(yè)面的美感，想換成其它圖片又不合適之類(lèi)的麻煩情況吧。不過(guò)現(xiàn)在好了，大家只要用了以下的幾個(gè)CSS里控制圖片方法，那么你以后就不會(huì)再有此類(lèi)的麻煩事發(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（水平方向鋪開(kāi)）、repeat-y（垂直方向鋪開(kāi)）、repeat（兩個(gè)方向鋪開(kāi)）。

當(dāng)然，它可以控制圖片的重復(fù)，也可以控制圖片不重復(fù)的。no-repeat這個(gè)就是用來(lái)表示只顯示一幅背景圖片，而不是重復(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)過(guò)上面的設(shè)置后往往還不夠的，因?yàn)楫?dāng)你使用上面的不重復(fù)顯示設(shè)置后，圖片只顯示在頁(yè)面的左上角，而不會(huì)在其它地方，可是如果要在中間或者其它地方出現(xiàn)這張背景圖片的話，那么background-position這個(gè)就可以幫你了，因?yàn)樗褪怯脕?lái)顯示圖片相對(duì)于左上角的一個(gè)位置的（就是默認(rèn)的值0% 0%），由兩個(gè)值來(lái)設(shè)定，中間用空格來(lái)隔開(kāi)。

它的主要的幾個(gè)值有l(wèi)eft　center　right和top　center　bottom，也可以用百分?jǐn)?shù)值指定相對(duì)位置或用一個(gè)值來(lái)指定絕對(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:100px 10px}

·控制圖片是否滾動(dòng) background-attachment

上面的兩步可以幫你完成圖像的定位，可是這樣做好以后還不是完美的，因?yàn)槿绻愕捻?yè)面有滾動(dòng)條的時(shí)候，那么你這張背景圖片就不會(huì)永遠(yuǎn)定位在那個(gè)位置了，如果想要圖片永遠(yuǎn)定位在那個(gè)位置，就只有讓這張圖片隨著頁(yè)面的內(nèi)容的滾動(dòng)而滾動(dòng)，這時(shí)background-attachment就可以幫你了你只要加入scroll（靜止）和fixed（滾動(dòng)）中的其中一個(gè)就可以了。

當(dāng)然不是讓你亂加的，畢竟scroll是默認(rèn)的，也就是不讓圖片隨頁(yè)面的內(nèi)容而滾動(dòng)的。 例：body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat;background-attachment:fixed}

好了，經(jīng)過(guò)以上這番設(shè)置后，我相信你的背景一定會(huì)更美的，但是過(guò)多的代碼往往可讀性很差，容易讓人產(chǎn)生錯(cuò)誤，所以在這里我要告訴大家的就是可以把以上的代碼全部加在一起使用，也就是說(shuō)把以上相關(guān)的代碼加到background中。

在把代碼加到background中的時(shí)候要在每個(gè)值中間加上空格來(lái)隔開(kāi)，而且不要把背景顏色的代碼放在背景圖片的URL后面，以免圖片顯示不出來(lái)。 例：body{background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') fixed 100px 50px no-repeat}

最后提醒一下大家，如果用代碼直接插入的話，那么一定要放下面這個(gè)代碼的里后再放在之間才能正常顯示出來(lái)！

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

當(dāng)前文章：CSS網(wǎng)頁(yè)制作技巧之控制網(wǎng)頁(yè)背景
文章網(wǎng)址：http://jinyejixie.com/news12/321412.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站營(yíng)銷(xiāo)、動(dòng)態(tài)網(wǎng)站、建站公司、網(wǎng)站設(shè)計(jì)公司、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)