首頁(yè)技術(shù)文章正文

怎樣控制網(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)以慷,憂思難忘。何以解憂?唯有杜康。青青子衿,悠悠我心。但為君故,沉吟至今。呦呦鹿鳴,食野之蘋。我有嘉賓,鼓瑟吹笙。明明如月,何時(shí)可掇?憂從中來(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è)方向平鋪,充滿整個(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é)果抓了一戶家里有釀酒器材居民,這戶居民被治了罪。恰好有一天簡(jiǎn)雍和劉備乘車出巡,路上見(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ū)傩砸粯?,在CSS中背景屬性也是一個(gè)復(fù)合屬性,可以將背景相關(guān)的樣式都綜合定義在一個(gè)復(fù)合屬性background中。使用background屬性綜合設(shè)置背景樣式的語(yǔ)法格式如下。

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

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

例如,下面的示例代碼。

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è)置背景圖像的位置固定*/  
}
分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!