除了使用顏色設(shè)置背景,還可以使用圖片設(shè)置背景。使用圖片作為網(wǎng)頁元素的背景,就涉及圖片的位置和重復(fù)方式。使用Css樣式能精確地控制背景圖片的位置和重復(fù)方式。

使用css提供的 background-imge屬性可以直接為頁面元使用 background-image屬性的通用語法：

background-image:url(pic.jpg)

使用 background-image屬性插入背景圖片,只需使用url直接鏈入所需要使用的背景圖片即可。其中 pic.jpg就是所使用的背景圖片。設(shè)置body的 background-image屬性就能為整個網(wǎng)頁設(shè)置背景圖。舉例說明：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >設(shè)置網(wǎng)頁元素的背景顏色< /title >?

< style >?

body{ background-image:url(bg.gif);}/*設(shè)置網(wǎng)頁整體背景圖片為bg.gif*/?

< /style >?

< body >?

< /body >?

< /html >

在默認(rèn)的情況下，使用body的background-image屬性設(shè)置背景圖片時，所使用的圖片無論大小都會重復(fù)地平鋪整個網(wǎng)頁。若要改變背景圖片的重復(fù)方式，就要使用background-repeat屬性。

其通用方式為：?

background-repeat:repeatmode，其中repeatmode有以下四種屬性可供選擇：?

repeat:背景圖仔縱向和橫向上平鋪。?

no-repeat：背景圖片不平鋪。?

repeat-x：背景圖在橫向上平鋪。 ? ? ? ? ? ? ? ? ? ?

repeat-y：背景圖在縱向上平鋪。

舉例說明：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >設(shè)置背景圖片的重復(fù)方式< /title >?

< style >?

div{ background-image:url(bg.gif); /*設(shè)置dv標(biāo)簽背景圖片為bg.gif*/ width:200px; height:200px; /*設(shè)置div標(biāo)簽的高度和寬度都為200像素*/ float:left; /*設(shè)置div標(biāo)簽向左浮動*/ border:1px solid #666; /*設(shè)置div標(biāo)簽的邊框為1像素灰色實線*/ margin:5px;}/**設(shè)置div標(biāo)簽的四邊邊距為5像素*/?

div#one{ background-repeat: repeat;}/*設(shè)置第一個div標(biāo)簽背景圖在縱向和橫向上平鋪*/ div#two{ background-repeat:no-repeat;}/*設(shè)置第二個div標(biāo)簽背景圖不平鋪*/?

div#three{ background-repeat:repeat-x;}/*設(shè)置第三個div標(biāo)簽背景圖在橫向上平鋪*/?

div#four{ background-repeat:repeat-y;}/*設(shè)置第四個div標(biāo)簽背景圖在縱向上平鋪*/?

< /style >?

< /head >?

< body >?

< div id="one" >1< /div >?

< div id="two" >2< /div >?

< div id="three" >3< /div >?

< div id="four" >4< /div >?

< /body >?

< /html >

默認(rèn)情況下，background-repeat的屬性為repeat。

若設(shè)置背景圖的 background- repeat為no- repeat,背景圖出現(xiàn)在網(wǎng)頁元素的左上角。若設(shè)置 background-repeat為其他重復(fù)值,背景圖也是從左上角開始平鋪。在默認(rèn)情況下,背景圖總是出現(xiàn)在頁面元素的左上角。CSS提供 background-position屬性用于改變背景圖與頁面元素的相對位置。其屬性的通用語法:

background-position：positio,?

其中, position值可以使用長度單位、百分比值和關(guān)鍵字來設(shè)定。?

使用任何長度單位都能設(shè)置背景圖與頁面元素的位置。通常情況下使用像素作為單位，在設(shè)置 background-position屬性的時候都要設(shè)置兩個數(shù)值，代碼如下:?

background-position: 10px 20px?

第一個10px代表背景圖與其所在的頁面元素的橫向相對位置為10像素;第二個20px代表背景圖與其所在的頁面元素的縱向相對位置為20像素。也就是說背景圖沿著x軸方向向右推移10像素;沿著y軸方向向下推移20像素。?

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >?

< html xmlns="http://www.w3.org/1999/xhtml" >?

< head >?

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >?

< title >使用長度單位設(shè)置背景圖的位置< /title >?

< style >?

div{ background-image:url(picture.jpg);/*設(shè)置div標(biāo)簽背景圖片為picture.jpg*/ width:200px; height:200px;/*設(shè)置div標(biāo)簽的高度和寬度都為200像素*/ float:left;/*設(shè)置div標(biāo)簽向左浮動*/ border:1px solid #666;/*設(shè)置div標(biāo)簽的邊框為1像素灰色實線*/ margin:5px;/*設(shè)置div標(biāo)簽的四邊邊距為5像素*/ }?

div#one{ background-position:0px 0px;}/*設(shè)置第一個div標(biāo)簽背景圖的左上角與（0,0）重合*/?

div#two{ background-position:50px 100px;}/*設(shè)置第一個div標(biāo)簽背景圖的左上角與（50,100）重合*/?

div#three{ background-position:100px 100px;}/*設(shè)置第一個div標(biāo)簽背景圖的左上角與（100,100）重合*/?

div#four{ background-position:200px 200px;}/*設(shè)置第一個div標(biāo)簽背景圖的左上角與（200,200）重合*/?

< /style >?

< /head >?

< body >?

< div id="one" >1< /div >?

< div id="two" >2< /div >?

< div id="three" >3< /div >?

< div id="four" >4< /div >?

< /body >?

< /html >

使用百分比設(shè)置背景圖的位置與使用單位設(shè)置背景圖的位置的方法類似，把長度單位改為百分比符號就可以了。

background-position:30% 30% ? ? ? ? ? ? ? ? ?

但是設(shè)置10px和10%的意義并不相同，假設(shè)背景圖的寬高均為40px；背景圖所在的頁面元素寬高均為300px。設(shè)置background-position第一個值為30%就代表，背景圖的30%的位置和頁面元素30%的位置對齊。背景圖40px X30%=12px，頁面元素300px X30%=90px。也就是說，背景圖沿x軸方向12像素的位置和頁面元素沿x軸方向90像素的位置對齊，對于background-position第二個百分比值也是如此。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns="http://www.w3.org/1999/xhtml" >

< head>

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >

< title >使用百分比設(shè)置背景圖的位置< /title >

< style >

div{ background-image:url(picture.jpg);/*設(shè)置div標(biāo)簽背景圖片為picture.jpg*/

width:300px; height:300px;/*設(shè)置div標(biāo)簽的高度和寬度都為300像素*/

float:left;/*設(shè)置div標(biāo)簽向左浮動*/

border:1px solid #666;/*設(shè)置div標(biāo)簽的邊框1像素灰色實線*/

margin:5px;/*設(shè)置div標(biāo)簽的四邊邊距為5像素*/

}

div#one{ background-repeat:no-repeat;/*設(shè)置背景圖片為不重復(fù)，位置為30%*/

?background-position:30% 30%/*設(shè)置背景圖位置為30%*/

?}

< /style >

< /head >

< body >

< /body >

< /html >

設(shè)置background-position屬性的關(guān)鍵字有六個，橫向上有三個關(guān)鍵字分別為left、center、right；縱向上也有三個關(guān)鍵字分別是top、center、bottom。如要設(shè)置背景圖和其所在的頁面元素的右下角對齊代碼如下：

background-position: right bottom?

設(shè)置橫向關(guān)鍵字為left，就相當(dāng)于設(shè)置百分比為0%；背景圖位于頁面元素的x軸的最左邊，設(shè)置center就相當(dāng)于設(shè)置百分比為50%，背景圖位于頁面元素的x軸的中心，設(shè)置right就相當(dāng)于設(shè)置百分比為100%。背景圖位于頁面元素的x軸最右側(cè)，對于縱向上的三個關(guān)鍵字也是如此。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns="http://www.w3.org/1999/xhtml">

< head>

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >

< title >使用關(guān)鍵字設(shè)置背景圖的位置< /title >

< style >

div{ width:150px; height:150px;

float:left;

border:1px solid #666;

margin:5px;

background-image:url(picture.jpg);

background-repeat:no-repeat;}

div#one{ background-position:left top}

div#two{ background-position:left center}

div#three{ background-position:left bottom}

div#four{ background-position:center top}

div#five{ background-position:center center}

div#six{ background-position:center bottom}

div#seven{ background-position:right top}

div#eight{ background-position:right center}

div#nine{ background-position:right bottom}

< /style >

< /head >

< body >

< div id="one" >left/top< /div >

< div id="two" >left/center< /div >

< div id="three" >left/bottom< /div >

< div id="four" >center/top< /div >

< div id="five ">center/center< /div >

< div id="six" >center/bottom< /div >

< div id="seven" >right/top< /div >

< div id="eight" >right/center< /div >

< div id="nine" >right/bottom< /div >

< /body >

< /html >

當(dāng)一個網(wǎng)頁的頁面超過瀏覽器的窗口時，該頁面右側(cè)就會產(chǎn)生滾動條。用戶在拖動滾動條時，就能瀏覽到頁面下方的內(nèi)容。在拖動時會發(fā)現(xiàn)網(wǎng)頁的背景也會跟著改變。若要實現(xiàn)當(dāng)拖動滾動條時，背景不移動就需要使用css提供的background-attachment屬性。

background-attachment屬性只有兩個值，分別是scroll和fixed，默認(rèn)屬性值為scroll。?

scroll:背景圖是隨對象內(nèi)容滾動。?

fixed：背景圖固定。

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns="http://www.w3.org/1999/xhtml" >

< head>

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" / >

< title >固定背景圖< /title >

< style >

body{ background-image:url(picture.jpg);/*設(shè)置網(wǎng)頁的背景圖為picture.jpg*/

background-position:top right;/*設(shè)置網(wǎng)頁的背景圖位置為右上角*/

background-repeat:no-repeat;/*設(shè)置網(wǎng)頁的背景圖不重復(fù)*/

background-attachment:fixed;}/*設(shè)置網(wǎng)頁的背景圖固定在網(wǎng)頁中*/

p{ font-size:14px;/*設(shè)置文字大小為14像素*/

line-height:24px;/*設(shè)置文字行高為24像素*/

text-indent:28px;/*設(shè)置文字首行縮進28像素*/

color:#F00;}/*設(shè)置文字顏色為紅色*/

< /style >

< /head >

< body >

< p >浙江網(wǎng)盛生意寶股份有限公司（股票代碼：002095，以下簡稱生意寶）是一家專業(yè)從事互聯(lián)網(wǎng)信息服務(wù)、電子商務(wù)、專業(yè)搜索引擎和企業(yè)應(yīng)用軟件開發(fā)的高新企業(yè)。公司總部位于“電子商務(wù)之都”杭州，從化工行業(yè)B2B起家，目前已發(fā)展成為國內(nèi)領(lǐng)先的行業(yè)電子商務(wù)運營商和綜合B2B運營商。< /p >

< p >2006年12月，生意寶在獲中國證監(jiān)會審核通過后順利實現(xiàn)IPO，受到證券市場的熱烈追捧，這意味著“國內(nèi)純互聯(lián)網(wǎng)第一股”的誕生，自此，生意寶也扛起了自主創(chuàng)新與民族互聯(lián)網(wǎng)創(chuàng)業(yè)的“大旗”，并由此改寫了我國十余年資本市場和互聯(lián)網(wǎng)產(chǎn)業(yè)的歷史。公司上市具有重大的現(xiàn)實意義與歷史意義，也正因為如此，生意寶上市被載入了我國互聯(lián)網(wǎng)產(chǎn)業(yè)與資本市場的發(fā)展史，是中國近幾年來少有的幾家民族的開創(chuàng)性的上市互聯(lián)網(wǎng)企業(yè)。< /p >

< p >生意寶及其旗下子公司現(xiàn)有員工1000逾人，本身擁有一支由博士、碩士、學(xué)士組成的層次合理的運營團隊，并先后在北京、上海、青島、濟南、南京、無錫、成都、廣州、鄭州、石家莊、沈陽、武漢、太原、長沙、廈門、韓國首爾、美國西雅圖、荷蘭等地余地設(shè)立了分支機構(gòu)，形成遍布全國、輻射全球的市場營銷與服務(wù)體系，是當(dāng)今國內(nèi)屈指可數(shù)的大型互聯(lián)網(wǎng)企業(yè)。

< /p >

< p >生意寶公司曾先后承擔(dān)“國家發(fā)改委化工行業(yè)電子商務(wù)應(yīng)用工程”、“全國電子信息推廣應(yīng)用項目”‘“浙江省軟件產(chǎn)業(yè)發(fā)展計劃項目”，“浙江省經(jīng)貿(mào)委推進流通企業(yè)電子商務(wù)進程項目”，“浙江省信息產(chǎn)業(yè)科技、新產(chǎn)品試制計劃項目”“杭州市第一批高技術(shù)產(chǎn)業(yè)化項目”等一大批國家省市級重點項目。享受國家發(fā)改委電子商務(wù)專項資金，浙江省軟件發(fā)展專項資金及浙江省信息服務(wù)業(yè)發(fā)展專項資金等，被浙江省科技廳認(rèn)定為“浙江省高新技術(shù)企業(yè)”，被批準(zhǔn)為“杭州高新技術(shù)產(chǎn)業(yè)開發(fā)區(qū)軟件產(chǎn)業(yè)園企業(yè)”；通過“軟件企業(yè)認(rèn)證”；被杭州企業(yè)信用評級委員會評定為“AAA級企業(yè)”。< /p >

< p >上市后，網(wǎng)盛生意寶團隊開啟了第二次創(chuàng)業(yè)。在過去的六年多時間里，公司團隊依靠著自己的努力、智慧和毅力克服了一個又一個困難，基本完成公司新戰(zhàn)略的布局既“電商、數(shù)據(jù)、金融三大戰(zhàn)略。< /p >

< /body >

< /html >

在上述的background-images、background-position、background-repeat、background-attachment屬性可以使用background屬性進行縮寫，其代碼為：

background-images:url(picture.jpg);?

background-position:top right;?

background-repeat:no-repeat;?

background-attachment:fixed

可以縮寫成為：background:url(picture.jpg) top right no-repeat fixed