csgo开箱_(wafotl.cn)茄子推荐的开箱子网站

企業(yè)官網(wǎng)建設(shè) 營銷型網(wǎng)站 微信分銷系統(tǒng) 微信小程序 企業(yè)郵局

了解css技術(shù)基礎(chǔ)之css設(shè)置背景

CSS提供了控制背景顏色和背景圖片的多個屬性,用于產(chǎn)生表現(xiàn)豐富的網(wǎng)頁背景。這樣能使單調(diào)的頁面變得豐富多彩。
css設(shè)置背景
前言

在網(wǎng)頁上只有圖片和文字的混排,會使頁面顯得非常單調(diào),而背景能使網(wǎng)頁外觀變得豐富多彩。CSS提供了控制背景顏色和背景圖片的多個屬性,用于產(chǎn)生表現(xiàn)豐富的網(wǎng)頁背景。在 XHTML文檔中,大部分標(biāo)簽都能應(yīng)用background屬性,包括body標(biāo)簽。設(shè)置body標(biāo)簽的背景屬性就是設(shè)置整個頁面的背景。

本文小編向大家介紹一下,如何使用CSS的背景屬性來控制頁面元素的背景設(shè)置。

1
設(shè)置背景顏色
1

css提供background-color屬性用于設(shè)置頁面元素的背景顏色,以下是使用background-color屬性的通用語法:

background-color: color

其中, color值代表顏色名,它可以使用顏色名稱、RGB值和十六進制值設(shè)置。若要為整個網(wǎng)頁設(shè)置一個背景顏色,就需要設(shè)置body標(biāo)簽的background-color屬性。

舉例說明: 設(shè)置body標(biāo)簽的 background- color屬性。 XHTML文檔中有三個diiv標(biāo)簽,每個都使用不同的顏色命名方式設(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-color:gray;}/*設(shè)置網(wǎng)頁整體背景顏色為灰色*/?

div{ width:100px; height:100px;}/*設(shè)置div標(biāo)簽為一個100像素寬和100像素高的容器*/?

div#one{ background-color:rgb(255,0,0)}/*設(shè)置第一個div標(biāo)簽的背景為紅色*/?

div#two{ background-color:pink}/*設(shè)置第二個div標(biāo)簽的背景為粉紅色*/?

div#three{ background-color:rgb(20%,30%,40%)}/*設(shè)置第三個div標(biāo)簽的背景為靛藍色*/?

< /style >?

< /head >?

< body >?

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

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

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

< /body >?

< /html >

大部分的標(biāo)然能敏設(shè)置共background-coler屬性。如p標(biāo)簽和a標(biāo)簽,都能設(shè)置 background-color屬性。


1
設(shè)置背景圖片
1

除了使用顏色設(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。


1
背景圖的位置
1

若設(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 >



1
滾動和固定背景圖
1

當(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 >



1
背景屬性縮寫
1

在上述的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


相關(guān)專題

新聞資訊

News Center

CONTACT US

聯(lián)系我們

二維碼

浙江網(wǎng)盛生意寶股份有限公司
聯(lián)系人:王經(jīng)理

沈陽市和平區(qū)青年大街322號 昌鑫大廈F座14層
電話:024—83959235
傳真:024-83953630
郵箱:wy@netsun.com

浙江網(wǎng)盛生意寶股份有限公司 版權(quán)所有 浙ICP證 浙B2-20080131