怎樣控制網(wǎng)頁(yè)的背景顏色和背景圖像？

更新時(shí)間:2022-04-28 來(lái)源:黑馬程序員瀏覽量:

網(wǎng)頁(yè)能通過(guò)背景圖像給人留下第一印象，如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片來(lái)突出效果，所以在網(wǎng)頁(yè)設(shè)計(jì)中，控制背景顏色和背景圖像是一個(gè)很重要的步驟。下面將詳細(xì)介紹CSS控制背景顏色和背景圖像的方法。

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

在CSS中，網(wǎng)頁(yè)元素的背景顏色使用background-color屬性來(lái)設(shè)置，其屬性值與文本顏色的取值一樣，可使用預(yù)定義的顏色值、十六進(jìn)制#RRGGBB或RGB代碼rgb(r,g,b)。background-color的默認(rèn)值為transparent，即背景透明，這時(shí)子元素會(huì)顯示其父元素的背景。了解了背景顏色屬性background-color，接下來(lái)通過(guò)一個(gè)案例來(lái)演示其用法。新建HTML頁(yè)面，在頁(yè)面中添加標(biāo)題和段落文本，然后通過(guò)background-color屬性控制標(biāo)題標(biāo)簽<h2>和主體標(biāo)簽<body>的背景顏色，如例5-6所示。
example06.html例5-61

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景顏色</title>
<style type="text/css">
body{background-color:#CCC;}      /*設(shè)置網(wǎng)頁(yè)的背景顏色*/
h2{
    font-family:"微軟雅黑"; 
    color:#FFF;
    background-color:#36C;          /*設(shè)置標(biāo)題的背景顏色*/
}
</style>
</head>
<body>
<h2>短歌行</h2>
<p> 對(duì)酒當(dāng)歌，人生幾何！譬如朝露，去日苦多?？?dāng)以慷，憂(yōu)思難忘。何以解憂(yōu)？唯有杜康。青青子衿，悠悠我心。但為君故，沉吟至今。呦呦鹿鳴，食野之蘋(píng)。我有嘉賓，鼓瑟吹笙。明明如月，何時(shí)可掇？憂(yōu)從中來(lái)，不可斷絕。越陌度阡，枉用相存。契闊談讌，心念舊恩。月明星稀，烏鵲南飛。繞樹(shù)三匝，何枝可依？山不厭高，海不厭深。周公吐哺，天下歸心。</p>
</body>
</html>

在例5-6中，通過(guò)background-color屬性分別控制標(biāo)題和網(wǎng)頁(yè)主體的背景顏色。

運(yùn)行例5-6，效果如圖5-10所示。

圖5-10設(shè)置背景顏色

在圖5-10中，標(biāo)題文本的背景顏色為紅色，段落文本顯示父元素body的背景顏色。這是由于未對(duì)段落標(biāo)簽<p>設(shè)置背景顏色，其默認(rèn)屬性值為transparent(顯示透明色)，所以段落將顯示其父元素的背景顏色。

設(shè)置背景顏色，其默認(rèn)屬性值為transparent(顯示透明色)，所以段落將顯示其父元素的背景顏色。

2.設(shè)置背景圖像

背景不僅可以設(shè)置為某種顏色，還可以將圖像作為標(biāo)簽的背景。在CSS中通過(guò)background-image屬性設(shè)置背景圖像。以例5-6為基礎(chǔ)，準(zhǔn)備一張背景圖像，如圖5-11所示，將圖像放在example06.html文件所在的文件夾中，然后更改body元素的CSS樣式代碼：

body{
    background-color:#CCC;           /*設(shè)置網(wǎng)頁(yè)的背景顏色*/
    background-image:url(bg.jpg);    /*設(shè)置網(wǎng)頁(yè)的背景圖像*/
}

保存HTML頁(yè)面，刷新網(wǎng)頁(yè)，效果如圖5-12所示。

背景圖像自動(dòng)沿著水平和豎直兩個(gè)方向平鋪，充滿(mǎn)整個(gè)網(wǎng)頁(yè)，并且覆蓋了<body>的背景顏色。

3.設(shè)置背景圖像平鋪

默認(rèn)情況下，背景圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望圖像平鋪，或者只沿著一個(gè)方向平鋪，可以通過(guò)background-repeat屬性來(lái)控制，該屬性的取值如下。repeat：沿水平和豎直兩個(gè)方向平鋪(默認(rèn)值)no-repeat：不平鋪(圖像位于元素的左上角，只顯示一次)?repeat-x：只沿水平方向平鋪?repeat-y：只沿豎直方向平鋪例如，希望上面例子中的圖像只沿著水平方向平鋪，可以將body元素的CSS代碼更改如下。

body{
    background-color:#CCC;            /*設(shè)置網(wǎng)頁(yè)的背景顏色*/
    background-image:url(bg.jpg);    /*設(shè)置網(wǎng)頁(yè)的背景圖像*/
    background-repeat:repeat-x;      /*設(shè)置背景圖像的平鋪*/
}

保存HTML頁(yè)面，刷新頁(yè)面，效果如圖5-13所示。

圖5-13設(shè)置背景圖像水平平鋪

在圖5-13中，圖像只沿著水平方向平鋪，背景圖像覆蓋的區(qū)域就顯示背景圖像，背景圖像沒(méi)有覆蓋的區(qū)域按照設(shè)置的背景顏色顯示?？梢?jiàn)當(dāng)背景圖像和背景顏色同時(shí)存在時(shí)，背景圖像優(yōu)先顯示。

4.設(shè)置背景圖像的位置

如果將背景圖像的平鋪屬性background-repeat定義為no-repeat，圖像將顯示在元素的左上角，如例5-7所示。

example07.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>設(shè)置背景圖像的位置</title>
<style type="text/css">
body{
   background-image:url(he.png);   /*設(shè)置網(wǎng)頁(yè)的背景圖像*/
   background-repeat:no-repeat;     /*設(shè)置背景圖像不平鋪*/
}
</style>
</head>
<body>
<h2>三國(guó)奇聞趣事</h2>
<p>有一次劉備下令蜀中禁止釀酒，結(jié)果抓了一戶(hù)家里有釀酒器材居民，這戶(hù)居民被治了罪。恰好有一天簡(jiǎn)雍和劉備乘車(chē)出巡，路上見(jiàn)了一男一女，簡(jiǎn)雍對(duì)劉備說(shuō)：這兩個(gè)人準(zhǔn)備做非法勾當(dāng)，為什么不抓起來(lái)？劉備問(wèn)：你怎么知道的呢？簡(jiǎn)雍說(shuō)：你看啊，它們有作案的工具，不是和有釀酒器材那家人一樣嗎？劉備聽(tīng)了后笑了笑，趕緊把抓的人放了。</p> 
</body>
</html>

在例5-7中，將主體元素的背景圖像定義為no-repeat不平鋪。

運(yùn)行例5-7，效果如圖5-14所示，背景圖像位于HTML頁(yè)面的左上角，即<body>元素的左上角。

圖5-14背景圖像不平鋪如果希望背景圖像出現(xiàn)在其他位置，就需要使用另一個(gè)CSS屬性background-position設(shè)置背景圖像的位置。

例如，將例5-7中的背景圖像定義在頁(yè)面的右下角，可以更改body元素的CSS樣式代碼：

body{
    background-image:url(he.png);    /*設(shè)置網(wǎng)頁(yè)的背景圖像*/
    background-repeat:no-repeat;        /*設(shè)置背景圖像不平鋪*/
    background-position:right bottom;  /*設(shè)置背景圖像的位置*/       
}

保存HTML文件，刷新網(wǎng)頁(yè)，效果如圖5-15所示，背景圖像出現(xiàn)在頁(yè)面的右下角。

圖5-15背景圖像位置

在CSS中，background-position屬性的值通常設(shè)置為兩個(gè)，中間用空格隔開(kāi)，用于定義背景圖像在元素的水平和垂直方向的坐標(biāo)，例如上面的“right bottom”。background-position屬性的默認(rèn)值為“00”或“top left”，即背景圖像位于元素的左上角。background-position屬性的取值有多種，具體如下。

(1)使用不同單位(最常用的是像素px)的數(shù)值：直接設(shè)置圖像左上角在元素中的坐標(biāo)，例如“background-position:20px 20px;”。

(2)使用預(yù)定義的關(guān)鍵字：指定背景圖像在元素中的對(duì)齊方式。

水平方向值：left、center、right。

垂直方向值：top、center、bottom。

兩個(gè)關(guān)鍵字的順序任意，若只有一個(gè)值則另一個(gè)默認(rèn)為center。例如：

center   相當(dāng)于center center（居中顯示）
top     相當(dāng)于top center 或center top（水平居中、上對(duì)齊）

(3)使用百分比：按背景圖像和元素的指定點(diǎn)對(duì)齊。

0% 0%表示圖像左上角與元素的左上角對(duì)齊。

50% 50%表示圖像50% 50%中心點(diǎn)與元素50% 50%的中心點(diǎn)對(duì)齊。

20% 30%表示圖像20% 30%的點(diǎn)與元素20% 30%的點(diǎn)對(duì)齊。

100% 100%表示圖像右下角與元素的右下角對(duì)齊。

如果取值只有一個(gè)百分?jǐn)?shù)，將作為水平值，垂直值則默認(rèn)為50%。接下來(lái)將background-position的值定義為像素值，來(lái)控制例5-7中背景圖像的位置，body元素的CSS樣式代碼如下

body{
    background-image:url(he.png);     /*設(shè)置網(wǎng)頁(yè)的背景圖像*/
    background-repeat:no-repeat;      /*設(shè)置背景圖像不平鋪*/
    background-position:50px 80px;   /*用像素值控制背景圖像的位置*/       
}

保存HTML頁(yè)面，再次刷新網(wǎng)頁(yè)，效果如圖5-16所示

圖5-16控制背景圖像的位置

在圖5-16中，圖像距離body元素的左邊緣為50px，距離上邊緣為80px。

5.設(shè)置背景圖像固定

當(dāng)網(wǎng)頁(yè)中的內(nèi)容較多時(shí)，但是希望圖像會(huì)隨著頁(yè)面滾動(dòng)條的移動(dòng)而移動(dòng)，此時(shí)就需要學(xué)習(xí)background-attachment屬性來(lái)設(shè)置。background-attachment屬性有兩個(gè)屬性值，分別代表不同的含義，具體解釋如下。

scroll：圖像隨頁(yè)面一起滾動(dòng)(默認(rèn)值)

fixed：圖像固定在屏幕上，不隨頁(yè)面滾動(dòng)

例如下面的示例代碼，就表示背景圖像在距離body元素的左邊緣為50px，距離上邊緣為80px的位置固定

body{
    background-image:url(he.png);/*設(shè)置網(wǎng)頁(yè)的背景圖像*/
    background-repeat:no-repeat;      /*設(shè)置背景圖像不平鋪*/
    background-position:50px 80px;    /*用像素值控制背景圖像的位置*/
    background-attachment:fixed;      /*設(shè)置背景圖像的位置固定*/  
}

6.綜合設(shè)置元素的背景

同邊框?qū)傩砸粯樱贑SS中背景屬性也是一個(gè)復(fù)合屬性，可以將背景相關(guān)的樣式都綜合定義在一個(gè)復(fù)合屬性background中。使用background屬性綜合設(shè)置背景樣式的語(yǔ)法格式如下。

background:背景色url("圖像") 平鋪定位固定;

在上面的語(yǔ)法格式中，各樣式順序任意，中間用空格隔開(kāi)，不需要的樣式可以省略。但實(shí)際工作中通常按照背景色、url("圖像")、平鋪、定位、固定的順序來(lái)書(shū)寫(xiě)。

例如，下面的示例代碼。

background: url(he.png) no-repeat 50px 80px fixed;

上述代碼省略了背景顏色樣式，等價(jià)于：

body{
    background-image:url(he.png);/*設(shè)置網(wǎng)頁(yè)的背景圖像*/
    background-repeat:no-repeat;             /*設(shè)置背景圖像不平鋪*/
    background-position:50px 80px;           /*用像素值控制背景圖像的位置*/
    background-attachment:fixed;             /*設(shè)置背景圖像的位置固定*/  
}

上一篇：border-color屬性設(shè)置單邊邊框和綜合四邊邊框顏色 下一篇：web前端培訓(xùn)費(fèi)用大概多少？