希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

• 【技術等級】初級

• 【承接文章】《圖片在容器中産生的底部間隔，CSS可以巧妙解決，前端原理很重要》

本文重點講解利用CSS技術設置HTML元素的背景，包括背景顔色和背景圖片，這樣可以讓你的頁面更加美觀。本文屬于前端開發的初級教程，适合于剛剛開始接觸CSS技術的學習者。

背景屬性是指可以為HTML中的頁面、塊級元素、内聯元素等設置背景外觀的效果。這裡一定要注意，背景屬性并不是隻能為頁面背景設置的，也可以為HTML文檔中任意元素設置背景的。這一組CSS屬性包括以下幾個：

• background-color

• background-image

• background-repeat

• background-position

• background-attachment

一、設置背景顔色：

CSS利用 background-color 屬性設置元素的背景顔色

該屬性有多種取值：

• 十六進制顔色代碼，例如：background-color:#ff0000。

• 十進制顔色代碼，例如：background-color:rgb(255,0,0)。

• 帶有透明度通道的十進制顔色代碼，例如：background-color:rgba(255,0,0,0.3)。

• 顔色英文單詞，例如：background-color:red。

• 顔色三要素模式代碼，例如：background-color:hsl(0,100,100)。

• 帶有透明度通道的顔色三要素模式代碼，background-color:hsla(0,100,100,0.3)。

上述取值較為常用的是“十六進制顔色代碼”、“帶有透明度通道的十進制顔色代碼”和“顔色英文單詞”。下面列舉幾個代碼實例。

p{background-color:#ff0000;} //設置段落的背景為紅色

body{background-color:#cccccc;} //設置整個文檔的背景為灰色

二、設置背景圖片：

CSS利用 background-image 屬性設置元素的背景圖片

該屬性的取值格式如下所示：

background-image:url(Image_URL);

該屬性需要在 url() 中指定一個圖片的路徑和文件名，代碼示例如下所示。

body{background-image:url(images/back.jpg);

上述代碼設置整個頁面的背景圖片為images文件夾下的名為back.jpg的圖片文件

三、設置背景圖片的重複平鋪方式：

CSS利用 background-repeat 屬性設置背景圖片的平鋪方式

該屬性有多種取值：

• repeat，默認值，背景圖片平鋪。

• no-repeat，背景圖片不平鋪。

• repeat-x，背景圖片水平平鋪。

• repeat-y，背景圖片垂直平鋪。

注意：該屬性必須結合 background-image 屬性共同使用。

四、設置背景圖片出現的位置：

CSS利用 background-position 屬性設置背景圖片出現的位置

1、可以取值為特定的單詞組合。

該種取值可以選取以下幾種對齊方式：

• 水平方向：left（左對齊）、right（右對齊）。

• 垂直方向：top（頂對齊）、bottom（底對齊）。

• 居中對齊：center。

上述對齊方式拼湊起來，可以下列形成9種取值方式：

• top left, 背景圖片頂部居左，位于頁面的左上角。

• top center, 背景圖片頂部居中，位于頁面的上方。

• top right, 背景圖片頂部居右，位于頁面的右上角。

• center left, 背景圖片中部居左，位于頁面的中部左側。

• center center, 背景圖片中部居中，位于頁面的正中心。

• center right, 背景圖片中部居右，位于頁面的中部右側。

• bottom left, 背景圖片底部居左，位于頁面的右下角。

• bottom center, 背景圖片底部居中，位于頁面的下方。

• bottom right, 背景圖片底部居右，位于頁面的右下角。

注意：若隻選取一個對齊方式，則第二個默認為center。

2、可以取值為帶有單位的固定坐标值：

格式：background-position:x y;

例如：background-position:100px 300px;

3、以百分比為單位的坐标值：

格式：background-position:x% y%;

例如：background-position:20% 15%;

注意：該屬性的使用必須同時具備下列兩個條件。

• 具備background-image屬性，也就是必須帶有背景圖片。

• background-repeat屬性不能取值為repeat，也就是背景圖片不平鋪。

五、設置背景圖片是否固定或随着頁面的其餘部分滾動：

該屬性有多種取值：

• scroll，默認值，背景圖片随頁面的其餘部分滾動。

• fixed，背景圖片固定。

---

文章預告

下一篇文章中，小海老師會以本篇文章講述的幾個屬性來帶領大家實踐一些實例。對于渴望在前端開發道路上前進的你一定不能錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的内容，可以私信我，我會免費将小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上也已經寫了有七八篇文章了。這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟着學下去，我們共同将前端開發的路努力堅持的走下去。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部