首頁技術(shù)文章正文

CSS控制背景顏色和背景圖像的方法

更新時間:2022年04月27日18時24分來源:傳智教育瀏覽次數(shù):

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

1.設置背景顏色

在CSS中，網(wǎng)頁元素的背景顏色使用background-color屬性來設置，其屬性值與文本顏色的取值一樣，可使用預定義的顏色值、十六進制#RRGGBB或RGB代碼rgb(r,g,b)。background-color的默認值為transparent，即背景透明，這時子元素會顯示其父元素的背景。了解了背景顏色屬性background-color，接下來通過一個案例來演示其用法。新建HTML頁面，在頁面中添加標題和段落文本，然后通過background-color屬性控制標題標簽<h2>和主體標簽<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;}      /*設置網(wǎng)頁的背景顏色*/
h2{
    font-family:"微軟雅黑"; 
    color:#FFF;
    background-color:#36C;          /*設置標題的背景顏色*/
}
</style>
</head>
<body>
<h2>短歌行</h2>
<p> 對酒當歌，人生幾何！譬如朝露，去日苦多?？斠钥?，憂思難忘。何以解憂？唯有杜康。青青子衿，悠悠我心。但為君故，沉吟至今。呦呦鹿鳴，食野之蘋。我有嘉賓，鼓瑟吹笙。明明如月，何時可掇？憂從中來，不可斷絕。越陌度阡，枉用相存。契闊談讌，心念舊恩。月明星稀，烏鵲南飛。繞樹三匝，何枝可依？山不厭高，海不厭深。周公吐哺，天下歸心。</p>
</body>
</html>

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

運行例5-6，效果如圖5-10所示。

圖5-10設置背景顏色

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

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

2.設置背景圖像

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

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

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

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

3.設置背景圖像平鋪

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

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

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

圖5-13設置背景圖像水平平鋪

在圖5-13中，圖像只沿著水平方向平鋪，背景圖像覆蓋的區(qū)域就顯示背景圖像，背景圖像沒有覆蓋的區(qū)域按照設置的背景顏色顯示?？梢姰敱尘皥D像和背景顏色同時存在時，背景圖像優(yōu)先顯示。

4.設置背景圖像的位置

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

example07.html

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

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

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

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

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

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

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

圖5-15背景圖像位置

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

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

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

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

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

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

center   相當于center center（居中顯示）
top     相當于top center 或center top（水平居中、上對齊）

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

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

50% 50%表示圖像50% 50%中心點與元素50% 50%的中心點對齊。

20% 30%表示圖像20% 30%的點與元素20% 30%的點對齊。

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

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

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

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

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

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

5.設置背景圖像固定

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

scroll：圖像隨頁面一起滾動(默認值)

fixed：圖像固定在屏幕上，不隨頁面滾動

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

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

6.綜合設置元素的背景

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

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

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

例如，下面的示例代碼。

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

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

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

上一篇：border-color屬性設置邊框顏色【前端CSS教程】 下一篇：移動app有幾種開發(fā)模式？