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

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

background-image:url(pic.jpg)

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

< !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)頁(yè)元素的背景顏色< /title >?

< style >?

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

< /style >?

< body >?

< /body >?

< /html >

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

其通用方式為：?

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

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

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

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

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

舉例說(shuō)明：

< !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)簽向左浮動(dòng)*/ border:1px solid #666; /*設(shè)置div標(biāo)簽的邊框?yàn)?像素灰色實(shí)線*/ margin:5px;}/**設(shè)置div標(biāo)簽的四邊邊距為5像素*/?

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

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

div#four{ background-repeat:repeat-y;}/*設(shè)置第四個(gè)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)頁(yè)元素的左上角。若設(shè)置 background-repeat為其他重復(fù)值,背景圖也是從左上角開(kāi)始平鋪。在默認(rèn)情況下,背景圖總是出現(xiàn)在頁(yè)面元素的左上角。CSS提供 background-position屬性用于改變背景圖與頁(yè)面元素的相對(duì)位置。其屬性的通用語(yǔ)法:

background-position：positio,?

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

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

background-position: 10px 20px?

第一個(gè)10px代表背景圖與其所在的頁(yè)面元素的橫向相對(duì)位置為10像素;第二個(gè)20px代表背景圖與其所在的頁(yè)面元素的縱向相對(duì)位置為20像素。也就是說(shuō)背景圖沿著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 >使用長(zhǎng)度單位設(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)簽向左浮動(dòng)*/ border:1px solid #666;/*設(shè)置div標(biāo)簽的邊框?yàn)?像素灰色實(shí)線*/ margin:5px;/*設(shè)置div標(biāo)簽的四邊邊距為5像素*/ }?

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

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

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

div#four{ background-position:200px 200px;}/*設(shè)置第一個(gè)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è)置背景圖的位置的方法類(lèi)似，把長(zhǎng)度單位改為百分比符號(hào)就可以了。

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

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

< !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)簽向左浮動(dòng)*/

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

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)鍵字有六個(gè)，橫向上有三個(gè)關(guān)鍵字分別為left、center、right；縱向上也有三個(gè)關(guān)鍵字分別是top、center、bottom。如要設(shè)置背景圖和其所在的頁(yè)面元素的右下角對(duì)齊代碼如下：

background-position: right bottom?

設(shè)置橫向關(guān)鍵字為left，就相當(dāng)于設(shè)置百分比為0%；背景圖位于頁(yè)面元素的x軸的最左邊，設(shè)置center就相當(dāng)于設(shè)置百分比為50%，背景圖位于頁(yè)面元素的x軸的中心，設(shè)置right就相當(dāng)于設(shè)置百分比為100%。背景圖位于頁(yè)面元素的x軸最右側(cè)，對(duì)于縱向上的三個(gè)關(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)一個(gè)網(wǎng)頁(yè)的頁(yè)面超過(guò)瀏覽器的窗口時(shí)，該頁(yè)面右側(cè)就會(huì)產(chǎn)生滾動(dòng)條。用戶在拖動(dòng)滾動(dòng)條時(shí)，就能瀏覽到頁(yè)面下方的內(nèi)容。在拖動(dòng)時(shí)會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)的背景也會(huì)跟著改變。若要實(shí)現(xiàn)當(dāng)拖動(dòng)滾動(dòng)條時(shí)，背景不移動(dòng)就需要使用css提供的background-attachment屬性。

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

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

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)頁(yè)的背景圖為picture.jpg*/

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

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

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

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

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

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

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

< /style >

< /head >

< body >

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

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

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

< /p >

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

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

< /body >

< /html >

在上述的background-images、background-position、background-repeat、background-attachment屬性可以使用background屬性進(jìn)行縮寫(xiě)，其代碼為：

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

background-position:top right;?

background-repeat:no-repeat;?

background-attachment:fixed

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