整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
篇文章結(jié)合上一篇所講到的CSS3技術(shù)中有關(guān)背景的屬性，制作一個實(shí)例。小海前端（頭條號）帶領(lǐng)大家一同實(shí)現(xiàn)一個漂亮的信紙背景效果。
承接文章：更加強(qiáng)大的背景圖像，CSS3增強(qiáng)的背景效果，前端對背景的優(yōu)化
技術(shù)等級：中級 | 適合有一定的CSS基礎(chǔ)的人士閱讀。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。
一、信紙背景實(shí)例效果：
本篇文章所實(shí)現(xiàn)的信紙背景效果如下圖所示。
信紙背景實(shí)例的最終效果圖
首先要明確一點(diǎn)：上圖中看到的除了文字以外的背景部分，并不是一張完整的背景圖片，而是由多個具有透明背景的png圖片利用CSS3的多重背景拼接出來的。
本實(shí)例所使用到的素材圖片如下圖所示。
用到的素材圖片
從上圖中可以看出，我們一共使用了六張素材圖片。前五張圖片都是png格式，背景為透明。最后一張圖片是一個紋理jpg圖片，可以隨意設(shè)置透明效果的紋理。
left-bottom.png，實(shí)現(xiàn)左下角的花邊效果。
left-top.png，實(shí)現(xiàn)左上角的花邊效果。
right-bottom.png，實(shí)現(xiàn)右下角的花邊效果。
right-top.png實(shí)現(xiàn)右上角的花邊效果。
line.png，實(shí)現(xiàn)信紙的水平線格子效果
wenli.jpg，實(shí)現(xiàn)信紙的背景紋理效果。
跟著小海前端（頭條號）學(xué)的小伙伴們，可以自行在網(wǎng)上搜索圖片，利用Photoshop制作成素材的樣子，大家可以發(fā)揮自己的設(shè)計頭腦，制作出各種不同的信紙效果。
二、頁面布局：
這個實(shí)例的頁面布局非常簡單，制作一個<div></div>標(biāo)記對作為容器，并將該容器的id屬性的取值設(shè)置為mail。然后在容器內(nèi)部放置<h1></h1>標(biāo)記對作為標(biāo)題，信件的正文使用<p></p>標(biāo)記對進(jìn)行包裹即可。
HTML代碼結(jié)構(gòu)如下所示。
<div id="mail">
<h1>古埃及的金字塔</h1>
<p>信件的正文</p>
</div>
三、利用CSS設(shè)置#mail的常規(guī)屬性：
為了便于查看，可以設(shè)置#mail的CSS樣式。設(shè)置該容器的寬度為400像素，高度為600像素。并設(shè)置容器在頁面內(nèi)居中顯示。將容器的填充寬度設(shè)置為50像素，并在容器外部添加一個10像素的深紅色邊框線。
最后調(diào)整內(nèi)部文字的CSS樣式。包括文字的字號設(shè)置為14像素，首行縮進(jìn)為28像素，行高為27像素。當(dāng)然也可以根據(jù)水平線格子的間隔高度自行調(diào)整上述參數(shù)。
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加載背景圖片，這需要將素材圖片中準(zhǔn)備的所有png圖片和wenli.jpg圖片全部加載到該容器中作為背景。
CSS3中的background-image已經(jīng)支持多背景圖片的功能，只需要將多個圖片的url()路徑之間利用逗號隔開即可。一定要注意：必須是逗號進(jìn)行間隔。
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);
五、設(shè)置多背景圖片的背景屬性：
下一步需要設(shè)置多背景圖片的其他背景屬性。這需要根據(jù)background-image屬性加載背景圖片的順序來完成其他背景屬性的設(shè)置。
這里需要注意，上一步的代碼中顯示，第一個加載的是水平線格子圖片line.png，接下來一次加載的是左上角花邊、左下角花邊、右上角花邊、右下角花邊，最后是紋理圖片wenli.jpg。
1、設(shè)置背景圖片的平鋪方式：
我們知道：第一個加載的水平線格子圖片應(yīng)該平鋪；四個方向角的花邊圖片不應(yīng)該平鋪；紋理圖片應(yīng)該平鋪。
因此根據(jù)背景圖片的加載順序可以書寫成如下格式：
background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
大家仔細(xì)觀察，所有的平鋪取值都是使用逗號隔開的，而且共有6個平鋪取值，正好對應(yīng)background-image屬性中加載的六張圖片的順序。
2、設(shè)置背景圖片的定位：
這里使用background-position屬性來設(shè)置背景圖片的定位。
第一個加載的水平線格子圖片因?yàn)槠戒仯晕恢每梢詮娜萜鞯淖笊辖蔷烷_始顯示。因此取值為left top。
左上角花邊應(yīng)該顯示在左上角，即left top。
左下角花邊應(yīng)該顯示在左下角，即left bottom。
右上角花邊應(yīng)該顯示在右上角，即right top。
右下角花邊應(yīng)該顯示在右下角，即right bottom。
最后一個加載的紋理圖片因?yàn)橐财戒仯砸矎淖笊辖情_始顯示。
CSS代碼如下所示：
background-position: left top,left top,left bottom,right top,right bottom,left top;
3、設(shè)置圖片的大小：
這里可以根據(jù)背景圖片本身的大小進(jìn)行適當(dāng)?shù)目s放。
CSS代碼如下所示：
background-size: 50px,20%,20%,20%,20%,50px;
屬性background-size原本需要指定兩個數(shù)值來表示寬度和高度的大小變化。若只指定了一個數(shù)值，則寬度和高度均采用該數(shù)值來對圖片進(jìn)行縮放。
4、設(shè)置圖片顯示的原點(diǎn)坐標(biāo)：
這里只有水平線格子圖片和紋理圖片的顯示需要調(diào)整原點(diǎn)坐標(biāo)。
水平線格子只出現(xiàn)在由文本內(nèi)容的部分，因此設(shè)置為content-box，從文本區(qū)域開始顯示。
紋理圖片可以設(shè)置為padding-box，即從填充區(qū)域開始顯示。
其他圖片都設(shè)置為border-box，即從邊框開始顯示。
CSS代碼如下所示。
background-origin: content-box,border-box,border-box,border-box,border-box,padding-box;
5、設(shè)置圖片的顯示區(qū)域：
每張圖片的顯示區(qū)域都從所設(shè)置的原點(diǎn)坐標(biāo)就開始顯示，因此取值與原點(diǎn)坐標(biāo)的取值是相同的。
CSS代碼如下所示。
background-clip: content-box,border-box,border-box,border-box,border-box,padding-box;
六、整個實(shí)例的完整CSS代碼：
本篇文章帶領(lǐng)大家所制作的信紙背景效果的完整CSS代碼如下圖所示。
完整的CSS代碼
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。
關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。
下一篇文章中，小海前端（頭條號）會為小伙伴們繼續(xù)介紹CSS3新增的屬性值。下一篇文章介紹CSS3的邊框?qū)傩怨δ堋?/p>
景顏色，作為頁面設(shè)計元素中不可或缺的一部分，對頁面整體效果有重大影響。在 CSS 中，使用 background-color 屬性來指定元素的背景顏色。通過正確使用 background color，可以提高頁面美觀，并為用戶提供最佳的體驗(yàn)。
設(shè)置背景色
在 CSS 中，使用以下語法設(shè)置背景色：
css
.element {
background-color: #color;
}
其中：
* .element 是要設(shè)置背景色的元素的 CSS 選擇器。
* #color 是指定背景色的顏色值，例如 #0 viciss紅色。
常見的背景色值
在 CSS 中有許多預(yù)定義的背景色值，例如：
* 白色：#ffffff
* 黑色：#0 Kün黑色
* 藍(lán)色：#0 Kün藍(lán)色
* Greens：#38b54 vicissteen
* 紅色：#d32929
背景色組合
背景色組合可以 create 出不同的視覺效果。以下是一些流行的背景色組合：
* 藍(lán)色與白色：經(jīng)典、安靜
* 黑色與白色：精致、現(xiàn)代
* 干本色：經(jīng)典、專業(yè)
* 青色與黃綠：活力、興奮
背景色陰影
使用背景陰影可以為頁面添加深度和視覺興趣。
css
.element {
background-color: #6 Kün灰色;
box-shadow: 0 vicissteen 5px 5px #888;
}
背景漸變
使用背景漸變可以創(chuàng)造出平滑的過渡效果。
css
.element {
background: linear-gradient(to right, #50 vicissteen 0 Kün灰色);
}
結(jié)論
在 CSS 中使用 background color 屬性可以輕松設(shè)置頁面元素的背景色。通過選擇合適的背景色值、組合和效果，可以為頁面創(chuàng)造出最佳的視覺體驗(yàn)。
望收藏了我寫的文章的你同時可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。
【技術(shù)等級】初級
【承接文章】《圖片在容器中產(chǎn)生的底部間隔，CSS可以巧妙解決，前端原理很重要》
本文重點(diǎn)講解利用CSS技術(shù)設(shè)置HTML元素的背景，包括背景顏色和背景圖片，這樣可以讓你的頁面更加美觀。本文屬于前端開發(fā)的初級教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。
背景屬性是指可以為HTML中的頁面、塊級元素、內(nèi)聯(lián)元素等設(shè)置背景外觀的效果。這里一定要注意，背景屬性并不是只能為頁面背景設(shè)置的，也可以為HTML文檔中任意元素設(shè)置背景的。這一組CSS屬性包括以下幾個：
background-color
background-image
background-repeat
background-position
background-attachment
一、設(shè)置背景顏色：
CSS利用 background-color 屬性設(shè)置元素的背景顏色
該屬性有多種取值：
十六進(jìn)制顏色代碼，例如：background-color:#ff0000。
十進(jìn)制顏色代碼，例如：background-color:rgb(255,0,0)。
帶有透明度通道的十進(jìn)制顏色代碼，例如：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)。
上述取值較為常用的是“十六進(jìn)制顏色代碼”、“帶有透明度通道的十進(jìn)制顏色代碼”和“顏色英文單詞”。下面列舉幾個代碼實(shí)例。
p{background-color:#ff0000;} //設(shè)置段落的背景為紅色
body{background-color:#cccccc;} //設(shè)置整個文檔的背景為灰色
二、設(shè)置背景圖片：
CSS利用 background-image 屬性設(shè)置元素的背景圖片
該屬性的取值格式如下所示：
background-image:url(Image_URL);
該屬性需要在 url() 中指定一個圖片的路徑和文件名，代碼示例如下所示。
body{background-image:url(images/back.jpg);
上述代碼設(shè)置整個頁面的背景圖片為images文件夾下的名為back.jpg的圖片文件
三、設(shè)置背景圖片的重復(fù)平鋪方式：
CSS利用 background-repeat 屬性設(shè)置背景圖片的平鋪方式
該屬性有多種取值：
repeat，默認(rèn)值，背景圖片平鋪。
no-repeat，背景圖片不平鋪。
repeat-x，背景圖片水平平鋪。
repeat-y，背景圖片垂直平鋪。
注意：該屬性必須結(jié)合 background-image 屬性共同使用。
四、設(shè)置背景圖片出現(xiàn)的位置：
CSS利用 background-position 屬性設(shè)置背景圖片出現(xiàn)的位置
1、可以取值為特定的單詞組合。
該種取值可以選取以下幾種對齊方式：
水平方向：left（左對齊）、right（右對齊）。
垂直方向：top（頂對齊）、bottom（底對齊）。
居中對齊：center。
上述對齊方式拼湊起來，可以下列形成9種取值方式：
top left, 背景圖片頂部居左，位于頁面的左上角。
top center, 背景圖片頂部居中，位于頁面的上方。
top right, 背景圖片頂部居右，位于頁面的右上角。
center left, 背景圖片中部居左，位于頁面的中部左側(cè)。
center center, 背景圖片中部居中，位于頁面的正中心。
center right, 背景圖片中部居右，位于頁面的中部右側(cè)。
bottom left, 背景圖片底部居左，位于頁面的右下角。
bottom center, 背景圖片底部居中，位于頁面的下方。
bottom right, 背景圖片底部居右，位于頁面的右下角。
注意：若只選取一個對齊方式，則第二個默認(rèn)為center。
2、可以取值為帶有單位的固定坐標(biāo)值：
格式：background-position:x y;
例如：background-position:100px 300px;
3、以百分比為單位的坐標(biāo)值：
格式：background-position:x% y%;
例如：background-position:20% 15%;
注意：該屬性的使用必須同時具備下列兩個條件。
具備background-image屬性，也就是必須帶有背景圖片。
background-repeat屬性不能取值為repeat，也就是背景圖片不平鋪。
五、設(shè)置背景圖片是否固定或隨著頁面的其余部分滾動：
該屬性有多種取值：
scroll，默認(rèn)值，背景圖片隨頁面的其余部分滾動。
fixed，背景圖片固定。
下一篇文章中，小海老師會以本篇文章講述的幾個屬性來帶領(lǐng)大家實(shí)踐一些實(shí)例。對于渴望在前端開發(fā)道路上前進(jìn)的你一定不能錯過！
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上也已經(jīng)寫了有七八篇文章了。這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我系統(tǒng)的歸納過的。
關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
