整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
篇文章結(jié)合上一篇所講到的CSS3技術(shù)中有關(guān)背景的屬性，制作一個(gè)實(shí)例。小海前端（頭條號(hào)）帶領(lǐng)大家一同實(shí)現(xiàn)一個(gè)漂亮的信紙背景效果。
承接文章：更加強(qiáng)大的背景圖像，CSS3增強(qiáng)的背景效果，前端對(duì)背景的優(yōu)化
技術(shù)等級(jí)：中級(jí) | 適合有一定的CSS基礎(chǔ)的人士閱讀。
希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號(hào)，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會(huì)學(xué)到對(duì)你有用的知識(shí)。
一、信紙背景實(shí)例效果：
本篇文章所實(shí)現(xiàn)的信紙背景效果如下圖所示。
信紙背景實(shí)例的最終效果圖
首先要明確一點(diǎn)：上圖中看到的除了文字以外的背景部分，并不是一張完整的背景圖片，而是由多個(gè)具有透明背景的png圖片利用CSS3的多重背景拼接出來的。
本實(shí)例所使用到的素材圖片如下圖所示。
用到的素材圖片
從上圖中可以看出，我們一共使用了六張素材圖片。前五張圖片都是png格式，背景為透明。最后一張圖片是一個(gè)紋理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)信紙的背景紋理效果。
跟著小海前端（頭條號(hào)）學(xué)的小伙伴們，可以自行在網(wǎng)上搜索圖片，利用Photoshop制作成素材的樣子，大家可以發(fā)揮自己的設(shè)計(jì)頭腦，制作出各種不同的信紙效果。
二、頁面布局：
這個(gè)實(shí)例的頁面布局非常簡單，制作一個(gè)<div></div>標(biāo)記對(duì)作為容器，并將該容器的id屬性的取值設(shè)置為mail。然后在容器內(nèi)部放置<h1></h1>標(biāo)記對(duì)作為標(biāo)題，信件的正文使用<p></p>標(biāo)記對(duì)進(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像素，并在容器外部添加一個(gè)10像素的深紅色邊框線。
最后調(diào)整內(nèi)部文字的CSS樣式。包括文字的字號(hào)設(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)支持多背景圖片的功能，只需要將多個(gè)圖片的url()路徑之間利用逗號(hào)隔開即可。一定要注意：必須是逗號(hào)進(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è)置。
這里需要注意，上一步的代碼中顯示，第一個(gè)加載的是水平線格子圖片line.png，接下來一次加載的是左上角花邊、左下角花邊、右上角花邊、右下角花邊，最后是紋理圖片wenli.jpg。
1、設(shè)置背景圖片的平鋪方式：
我們知道：第一個(gè)加載的水平線格子圖片應(yīng)該平鋪；四個(gè)方向角的花邊圖片不應(yīng)該平鋪；紋理圖片應(yīng)該平鋪。
因此根據(jù)背景圖片的加載順序可以書寫成如下格式：
background-repeat: repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat;
大家仔細(xì)觀察，所有的平鋪取值都是使用逗號(hào)隔開的，而且共有6個(gè)平鋪取值，正好對(duì)應(yīng)background-image屬性中加載的六張圖片的順序。
2、設(shè)置背景圖片的定位：
這里使用background-position屬性來設(shè)置背景圖片的定位。
第一個(gè)加載的水平線格子圖片因?yàn)槠戒?，所以位置可以從容器的左上角就開始顯示。因此取值為left top。
左上角花邊應(yīng)該顯示在左上角，即left top。
左下角花邊應(yīng)該顯示在左下角，即left bottom。
右上角花邊應(yīng)該顯示在右上角，即right top。
右下角花邊應(yīng)該顯示在右下角，即right bottom。
最后一個(gè)加載的紋理圖片因?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原本需要指定兩個(gè)數(shù)值來表示寬度和高度的大小變化。若只指定了一個(gè)數(shù)值，則寬度和高度均采用該數(shù)值來對(duì)圖片進(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;
六、整個(gè)實(shí)例的完整CSS代碼：
本篇文章帶領(lǐng)大家所制作的信紙背景效果的完整CSS代碼如下圖所示。
完整的CSS代碼
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識(shí)，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡單易懂的語言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時(shí)間。
希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號(hào)，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會(huì)學(xué)到對(duì)你有用的知識(shí)。
關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。
下一篇文章中，小海前端（頭條號(hào)）會(huì)為小伙伴們繼續(xù)介紹CSS3新增的屬性值。下一篇文章介紹CSS3的邊框?qū)傩怨δ堋?/p>
篇文章主要講述了CSS的基礎(chǔ)用法，講述了如何定義頭文件，導(dǎo)入CSS文件，id和class選擇器，元素選擇器，后代選擇器，子元素選擇器，兄弟選擇器，偽類選擇器等等，讓大家對(duì)CSS選擇器有個(gè)簡單的認(rèn)識(shí)和了解。這篇接上篇文章，繼續(xù)講解CSS的基礎(chǔ)用法。
背景可以設(shè)置很多，比如背景顏色，背景圖片，背景定位，背景重復(fù)，背景關(guān)聯(lián)，
<div style='background-color='red'></div><div style='background-image: url('1.png');'></div><div style='background-position:center'></div>
center 中間
top 頂部
bottom 底部
right 右邊
left 左邊
還可以使用百分比來設(shè)置定位：
<div style='background-position:40% 50%'></div>
或者設(shè)置像素值：
<div style='background-position:100px 100px'></div><div style=' background-repeat:repeat-x'></div>
repeat-x 水平平鋪圖片
repeat-y 垂直平鋪圖片
no-repeat 不平鋪圖片<div style='background-attachment:fixed'></div>
fixed 固定 不出現(xiàn)滾動(dòng)條
scroll 出現(xiàn)滾動(dòng)條
no 沒有滾動(dòng)條<div style='background-size:50px 50px'></div><div style='background-origin:content-box'></div>
content-box 文本內(nèi)容區(qū)域
padding-box 內(nèi)邊距區(qū)域
border-box 外邊框區(qū)域<div style='background-clip:content-box'></div>
content-box 裁剪文本內(nèi)容區(qū)域
padding-box 裁剪內(nèi)邊距區(qū)域
border-box 裁剪外邊框區(qū)域這篇文章主要介紹了CSS樣式更改篇中的背景Background的基本設(shè)置，希望讓大家對(duì)CSS選擇器有個(gè)簡單的認(rèn)識(shí)和了解。
****看完本文有收獲？請(qǐng)轉(zhuǎn)發(fā)分享給更多的人****
想要學(xué)習(xí)更多，請(qǐng)前往Python爬蟲與數(shù)據(jù)挖掘?qū)Ｓ镁W(wǎng)站：http://pdcfighting.com/
reamweaver的CSS面板分類
type(類型)
background(背景)
block(區(qū)塊)
box(方框) 或盒子意思
border(邊框)
list(列表)
positioning(定位)
extensions(擴(kuò)展)
共八個(gè)部分
1. type(類型)
type面板主要是對(duì)文字的字體，大小，顏色，效果等基本樣式進(jìn)行設(shè)置。
注意：屬性名帶*號(hào)的是指樣式效果不能在編輯文檔時(shí)顯示，要用瀏覽器打開才能看到效果。
(1)font-family：設(shè)置字體系列。什么叫字體系列呢?是指對(duì)文字設(shè)定幾個(gè)字體，當(dāng)遇到第一個(gè)字體不能顯示的文字時(shí)會(huì)自動(dòng)用系列中的第二個(gè)
字體或后面的字體顯示。
注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個(gè)系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，
也可以直接手動(dòng)在下拉框里寫字體名，字體之間用逗號(hào)隔開。中文網(wǎng)頁默認(rèn)字體是宋體, 一般就空著不要選取任何字體。
默認(rèn)值： not specified(取決于瀏覽器,系統(tǒng)默認(rèn)的字體, 如: 微軟雅黑)
注意：
1.如果有漢字, 那么我們要加引號(hào)
2.如果有多個(gè)英文字母組成的單詞, 我們也要加引號(hào); "microsoft yahei" 中間用空格隔開
3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...
為了避免在CSS中使用 font 或 font-family 設(shè)置中文字體時(shí)亂碼, 可以使用 Unicode 編碼來表示字體。
/* 示例:使用Unicode字體編碼設(shè)置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";(2)font-size：定義文字的大小。你可以通過選取數(shù)字和度量單位來選擇具體的字體大小，或者你也可以選擇一個(gè)相對(duì)的字體大小。
最好使用pixels作為單位，這樣不會(huì)在瀏覽器中文本變形。一般字體用比較標(biāo)準(zhǔn)的12px或14px, 默認(rèn)值為16px。
注意：CSS中長度的單位分絕對(duì)長度單位和相對(duì)長度單位:
絕對(duì)長度單位有：
pt：磅(point)
mm、cn、in、pc：(毫米、厘米、英寸、活字)根據(jù)顯示的實(shí)際尺寸來確定長度。
此類單位不隨顯示器的分辨率改變而改變。
相對(duì)長度單位有：
px：(像素)根據(jù)顯示器的分辨率來確定長度。
em：當(dāng)前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。
比如自身font-size: 30px; 那么此時(shí)1em=30px;
ex：當(dāng)前字母"x"的高度，一般為字體尺寸的一半。
%：是以當(dāng)前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。
small、large：表示比當(dāng)前小一個(gè)級(jí)別或大一個(gè)級(jí)別的尺寸。
默認(rèn)值：medium(標(biāo)準(zhǔn)大小)
(3)font-style：定義字體樣式為normal、italic、oblique。默認(rèn)設(shè)置為normal。
注意： italic 斜體 oblique 歪斜體 italic和oblique實(shí)際效果是一樣的。
默認(rèn)值:normal
(4)line-height：設(shè)置文本所在行的行高。默認(rèn)為normal。可以是行內(nèi)元素、行內(nèi)塊元素, 通常與height設(shè)置的高度值相同, 可以做到垂直居中的作用。
你也可以自己鍵入一個(gè)精確的數(shù)值并選取一個(gè)計(jì)量單位。
比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。
最常用的方法: line-height:1.5em; /*行間距,相對(duì)數(shù)值,1.5倍行距,*/ 可有效的避免文字發(fā)生重疊
默認(rèn)值： normal
(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。
這些效果可以同時(shí)存在，將效果前的復(fù)選框選定即可。
注意：鏈接的默認(rèn)設(shè)置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持
默認(rèn)值： none
(6)font-weight：給字體指定粗體字的磅值。
normal 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。
bold 定義粗體字符。
bolder 定義更粗的字符。
lighter 定義更細(xì)的字符。
100
200
300
400
500
600
700
800
900
inherit 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。
定義由粗到細(xì)的字符。400 等同于 normal, 而 700 等同于 bold。
默認(rèn)值: normal
(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時(shí), 此樣式區(qū)域內(nèi)所有字母大寫。
normal表示正常的字體, 為默認(rèn)值；
默認(rèn)值: normal
(8)text-transform：將選區(qū)中每個(gè)單詞的第一個(gè)字母轉(zhuǎn)為大寫, 或者令單詞全部大寫或全部小寫。
參數(shù)：capitalize(單詞首字母大寫)、uppercase(轉(zhuǎn)換成大寫)、lowercase(轉(zhuǎn)換成小寫)、none(不轉(zhuǎn)換)。
默認(rèn)值：none
(9)color：定義文字顏色。包括對(duì)表單輸入的文字顏色。
CSS中顏色的值有三種表示方法：
#RRGGBB格式，是由紅綠藍(lán)三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進(jìn)制正整數(shù)。
例如：#FF0000表示紅色，#FFFF00表示黃色。
rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。
用顏色名稱。CSS可以使用已經(jīng)定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。
顏色值的縮寫:
p{color:#000000} 可以縮寫為：p{color:#000}
p{color:#336699} 可以縮寫為：p{color:#369}
默認(rèn)值： not specified
color: transparent; 透明色
rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1)
注意: 如果文字的顏色通過單獨(dú)的類選擇去設(shè)置沒有改變顏色, 則應(yīng)該通過組合選擇器(.header .top .topR .blue)去設(shè)置, 改變它的優(yōu)先級(jí)。
2. background(背景)
background面板主要是對(duì)元素的背景進(jìn)行設(shè)置，包括背景顏色、背景圖象、背景圖象的控制。
一般是對(duì)body(頁面)、table(表格)、div(區(qū)域)的設(shè)置。
(1)background-color：設(shè)置元素的背景色。包括對(duì)input表單輸入框的背景顏色;
默認(rèn)值: transparent(背景顏色為透明)
rgba() 解釋: rgba(紅0-255, 綠0-255, 藍(lán)0-255, 透明度0-1) 一般用于背景色
(2)background-image：設(shè)置元素的背景圖像。
默認(rèn)值:none
CSS3支持多重背景圖,只要加上一個(gè)url指定圖片路徑,并用逗號(hào)(,)將兩組url分隔就可以了
background-image:url(a.jpg),url(b.jpg);base64使用
background-image: url("data:image/png;base64,iVBORw0KGgo=...");(3)background-repeat：確定背景圖像是否以及如何重復(fù)。
repeat 默認(rèn)值。背景圖像將在垂直方向和水平方向重復(fù)。
repeat-x 背景圖像將在水平方向重復(fù)。
repeat-y 背景圖像將在垂直方向重復(fù)。
no-repeat 背景圖像將僅顯示一次。
inherit 規(guī)定應(yīng)該從父元素繼承background-repeat屬性的設(shè)置。
注意：如果定義的元素的body，可以控制頁面背景是否重復(fù)。
默認(rèn)值: repeat
(4)background-attachment：固定背景圖像或者跟隨內(nèi)容滾動(dòng)。
參數(shù)fixed表示固定背景(不隨屏幕滾動(dòng)而滾動(dòng)，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內(nèi)容滾動(dòng)的背景。
注意：如果定義的元素的body, 可以使頁面背景固定。
默認(rèn)值: scroll
(5)background-position(X)：指定背景圖像的水平位置。
可以指定為left(左邊), center(居中)，right(右邊)；
也可以指定數(shù)值，如20px是指背景距離左邊20象素。
background-position(Y)：指定背景圖像的垂直位置。
可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數(shù)值。
background-position屬性值:
left top
center top
right top
left center
center center
right center
left bottom
center bottom
right bottom
如果您僅規(guī)定了一個(gè)關(guān)鍵詞，那么第二個(gè)值將是"center"。
注意:采用英文單詞的水平位置和垂直位置的屬性值可以調(diào)換
x% y% 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是 50%。
xpos ypos 第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。
如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是50%。
您可以混合使用 % 和 position 值。
默認(rèn)值：0% 0%
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
