篇文章結合上一篇所講到的CSS3技術中有關背景的屬性，制作一個實例。小海前端（頭條號）帶領大家一同實現一個漂亮的信紙背景效果。

承接文章：更加強大的背景圖像，CSS3增強的背景效果，前端對背景的優化

技術等級：中級 | 適合有一定的CSS基礎的人士閱讀。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

一、信紙背景實例效果：

本篇文章所實現的信紙背景效果如下圖所示。

信紙背景實例的最終效果圖

首先要明確一點：上圖中看到的除了文字以外的背景部分，并不是一張完整的背景圖片，而是由多個具有透明背景的png圖片利用CSS3的多重背景拼接出來的。

本實例所使用到的素材圖片如下圖所示。

用到的素材圖片

從上圖中可以看出，我們一共使用了六張素材圖片。前五張圖片都是png格式，背景為透明。最后一張圖片是一個紋理jpg圖片，可以隨意設置透明效果的紋理。

• left-bottom.png，實現左下角的花邊效果。

• left-top.png，實現左上角的花邊效果。

• right-bottom.png，實現右下角的花邊效果。

• right-top.png實現右上角的花邊效果。

• line.png，實現信紙的水平線格子效果

• wenli.jpg，實現信紙的背景紋理效果。

跟著小海前端（頭條號）學的小伙伴們，可以自行在網上搜索圖片，利用Photoshop制作成素材的樣子，大家可以發揮自己的設計頭腦，制作出各種不同的信紙效果。

二、頁面布局：

這個實例的頁面布局非常簡單，制作一個<div></div>標記對作為容器，并將該容器的id屬性的取值設置為mail。然后在容器內部放置<h1></h1>標記對作為標題，信件的正文使用<p></p>標記對進行包裹即可。

HTML代碼結構如下所示。

<div id="mail">

<h1>古埃及的金字塔</h1>

<p>信件的正文</p>

</div>

三、利用CSS設置#mail的常規屬性：

為了便于查看，可以設置#mail的CSS樣式。設置該容器的寬度為400像素，高度為600像素。并設置容器在頁面內居中顯示。將容器的填充寬度設置為50像素，并在容器外部添加一個10像素的深紅色邊框線。

最后調整內部文字的CSS樣式。包括文字的字號設置為14像素，首行縮進為28像素，行高為27像素。當然也可以根據水平線格子的間隔高度自行調整上述參數。

CSS代碼如下所示。

#mail{

width:400px; height:600px;

margin:0 auto;

padding:50px;

border:solid 10px rgba(132,26,26,0.8);

font-size: 14px;

line-height: 27px;

text-indent: 28px;

}

四、加載背景圖片：

接下來我們要為#mail加載背景圖片，這需要將素材圖片中準備的所有png圖片和wenli.jpg圖片全部加載到該容器中作為背景。

CSS3中的background-image已經支持多背景圖片的功能，只需要將多個圖片的url()路徑之間利用逗號隔開即可。一定要注意：必須是逗號進行間隔。

CSS代碼如下所示。

background-image: url(../images/line.png),

url(../images/left-top.png),

url(../images/left-bottom.png),

url(../images/right-top.png),

url(../images/right-bottom.png),

url(../images/wenli.jpg);

五、設置多背景圖片的背景屬性：

下一步需要設置多背景圖片的其他背景屬性。這需要根據background-image屬性加載背景圖片的順序來完成其他背景屬性的設置。

這里需要注意，上一步的代碼中顯示，第一個加載的是水平線格子圖片line.png，接下來一次加載的是左上角花邊、左下角花邊、右上角花邊、右下角花邊，最后是紋理圖片wenli.jpg。

1、設置背景圖片的平鋪方式：

我們知道：第一個加載的水平線格子圖片應該平鋪；四個方向角的花邊圖片不應該平鋪；紋理圖片應該平鋪。

因此根據背景圖片的加載順序可以書寫成如下格式：

background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;

大家仔細觀察，所有的平鋪取值都是使用逗號隔開的，而且共有6個平鋪取值，正好對應background-image屬性中加載的六張圖片的順序。

2、設置背景圖片的定位：

這里使用background-position屬性來設置背景圖片的定位。

• 第一個加載的水平線格子圖片因為平鋪，所以位置可以從容器的左上角就開始顯示。因此取值為left top。

• 左上角花邊應該顯示在左上角，即left top。

• 左下角花邊應該顯示在左下角，即left bottom。

• 右上角花邊應該顯示在右上角，即right top。

• 右下角花邊應該顯示在右下角，即right bottom。

• 最后一個加載的紋理圖片因為也平鋪，所以也從左上角開始顯示。

CSS代碼如下所示：

background-position: left top,left top,left bottom,right top,right bottom,left top;

3、設置圖片的大小：

這里可以根據背景圖片本身的大小進行適當的縮放。

CSS代碼如下所示：

background-size: 50px,20%,20%,20%,20%,50px;

屬性background-size原本需要指定兩個數值來表示寬度和高度的大小變化。若只指定了一個數值，則寬度和高度均采用該數值來對圖片進行縮放。

4、設置圖片顯示的原點坐標：

這里只有水平線格子圖片和紋理圖片的顯示需要調整原點坐標。

• 水平線格子只出現在由文本內容的部分，因此設置為content-box，從文本區域開始顯示。

• 紋理圖片可以設置為padding-box，即從填充區域開始顯示。

• 其他圖片都設置為border-box，即從邊框開始顯示。

CSS代碼如下所示。

background-origin: content-box,border-box,border-box,border-box,border-box,padding-box;

5、設置圖片的顯示區域：

每張圖片的顯示區域都從所設置的原點坐標就開始顯示，因此取值與原點坐標的取值是相同的。

CSS代碼如下所示。

background-clip: content-box,border-box,border-box,border-box,border-box,padding-box;

六、整個實例的完整CSS代碼：

本篇文章帶領大家所制作的信紙背景效果的完整CSS代碼如下圖所示。

完整的CSS代碼

小海聲明

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

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

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

文章預告

下一篇文章中，小海前端（頭條號）會為小伙伴們繼續介紹CSS3新增的屬性值。下一篇文章介紹CSS3的邊框屬性功能。

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

• 【技術等級】初級

• 【承接文章】《圖片在容器中產生的底部間隔，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教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

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

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

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