整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
【技術等級】初級
【承接文章】《在CSS中使用background屬性，調整頁面和塊背景，系統講解背景屬性》
本文承接上一篇文章中所講到的background屬性，通過幾個簡單實用的小例子，學些背景效果的各種實現方式。本文屬于前端開發(fā)的初級教程，適合于剛剛開始接觸CSS技術的學習者。
所承接的上一篇文章中，主要介紹了下列背景屬性：
background-color
background-image
background-repeat
background-position
background-attachment
本文在上一篇文章的基礎上，復習和鞏固這五個屬性的具體用法。
首先制作一張水印效果的圖片。該圖片的內容透明度較低，圖片較小。本例中制作了一個寬度為290像素，高度為205像素的圖片。該圖片的文件名為back01.jpg。圖片內容為兩行文本，顏色為黑色，同時調整了兩行文本的不透明度。圖片效果如下所示，大家也可以根據自己喜好利用Photoshop隨意制作。
例1素材圖片 back01.jpg
為頁面添加如下代碼在<head></head>標記對中：
<style type="text/css">
body{background-image:url("back01.jpg");}
</style>
由于圖片本身的尺寸遠遠小于整個頁面的大小，所以在默認情況下，該圖片會在頁面中平鋪以產生下列背景效果。
例1最終效果圖
首先制作一張花邊圖片。該圖片包含一個花邊圖樣，圖片較小。本例中制作了一個寬度為172像素，高度為36像素的圖片。該圖片的文件名為back02.jpg。圖片效果為：
例2 素材圖 back02.jpg
為頁面添加如下代碼在<head></head>標記對中：
<style type="text/css">
body{
background-image:url("back02.jpg");
background-repeat:repeat-x;
}
</style>
由于圖片本身的尺寸遠遠小于整個頁面的大小，同時又設置為水平方向平鋪，所以該圖片會在頁面中產生下列背景效果。
例2最終效果圖
首先制作一張漸變圖片。該圖片包含自上而下的藍白漸變。本例中制作了一個寬度為1像素，高度為200像素的圖片。該圖片的文件名為back03.jpg。圖片效果為：
例3 素材圖片 back03.jpg
為頁面添加如下代碼在<head></head>標記對中：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
}
</style>
由于圖片的寬度遠遠小于整個頁面的寬度，同時又設置了水平方向平鋪，所以該圖片該圖片會在頁面中產生下列背景效果。
同時，由于頁面本身的顏色默認為白色，因此，該漸變色下方的白色與頁面背景顏色融合。因此，當頁面過長產生垂直滾動條后，不會影響背景顏色的自然過渡。
那么，若需要給頁面背景添加自上而下的白藍漸變，應該如何設置呢？漸變色下方的藍色與頁面背景無法融合，會產生明顯的藍白邊界。該問題的解決方法是將頁面的背景顏色由默認的白色調整為漸變色下方的顏色即可。代碼如下：
<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
background-color:# 8181fc; //漸變色下方的藍色
}
</style>
首先制作一張可以居中放置的圖片。本例中制作了一個寬度為500像素，高度為500像素的圖片。該圖片的文件名為back04.jpg。圖片效果為：
例4 素材圖片 back04.jpg
實現該效果的代碼如下所示。
<style type="text/css">
body{
background-image:url("back04.jpg"); //加載圖片
background-repeat:no-repeat; //設置不平鋪
background-position:center center; //位置在頁面中心
background-attachment:fixed; //頁面滾動時圖片固定
}
</style>
下一篇文章中，小海老師會帶領大家學習CSS中功能強大的圖片精靈技術（CSS Sprite）。對于渴望在前端開發(fā)道路上前進的你一定不能錯過！
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
關注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學者跟著學下去，我們共同將前端開發(fā)的路努力堅持的走下去。
們平時看到的網頁中會有各式各樣的背景樣式，例如有用顏色作為背景的，也有圖片作為背景的。添加背景樣式能夠讓網頁更好看，那么要如何設置頁面的背景樣式呢，這就是本節(jié)我們要學習的內容。
首先我們來講如何設置背景顏色，瀏覽器頁面的默認背景顏色為白色，但是很多時候為了頁面的美觀我們會重新設置一個背景顏色，一般在一個網站中大部分頁面都會采用某個統一的背景顏色。
我們可以通過CSS 中的 background-color 屬性來設置背景顏色 ，這個屬性可以接受任何合法的顏色值，像顏色名稱、十六進制顏色值、RGB顏色都可以。
我們可以給所有的元素設置背景色，例如 body、h1、p、a 、div等等。
示例：
例如我們將頁面的背景顏色設置為 #E0E0E0、標題的背景顏色設置為綠色 #33CC66，段落的背景顏色為白色 #FFFFFF：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS學習(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h1>俠課島歡迎你！</h1>
<p>段落背景為白色</p>
<p>段落背景為白色</p>
<p>段落背景為白色</p>
</body>
</html>
在 index.css 頁面中的 CSS 樣式代碼：
body{
background-color: #E0E0E0;
}
h1{
background-color: #33CC66;
}
p{
background-color: #FFFFFF;
}
在瀏覽器中演示效果為：
如果使用的是外部樣式要記得在 HTML 頁面引入 .css 文件喲，否則 CSS 代碼不會生效。
現在你可以試著使用一下 background-color 屬性，假設在 <body> 標簽內有一個 <div> 標簽，我們需要給這個 <div> 標簽設置一些樣式，例如設置它的寬高分別為300px，背景顏色為 #FF9966 。然后在瀏覽器中打開這個頁面，會產生什么效果呢？
我們除了可以將元素的背景設置成各種顏色，還可以將背景設置成圖片，可以使用 background-image 屬性來設置背景圖片。屬性值的格式為： url('圖片地址') 。
示例：
我們準備了一張 310x210 的玫瑰花圖片（大家自己找一張圖片來測試也可），然后將這張圖片設置為 <body> 標簽的背景圖片，使用標簽選擇器設置樣式：
body{
background-image: url(./flower.png);
}
在瀏覽器中演示效果為：
我們可以看到上圖中，雖然背景圖片設置成功，但是圖片重復很多張，如果我們不想背景圖片重復，就需要用到 background-repeat 屬性。
我們可以使用 background-repeat 屬性來設置背景圖片是否重復（平鋪）。
可選的屬性值如下所示：
在實際應用中，一般我們用的比較多的屬性值是 no-repeat，設置圖片不重復。
示例：
我們來看一下上述幾個屬性值的演示效果，例如設置背景圖片僅在水平方向重復：
body{
background-image: url(./flower.png);
background-repeat: repeat-x;
}
在瀏覽器中演示效果為：
也可以將屬性值設置為 no-repeat，用于設置背景圖片不重復：
body{
background-image: url(./flower.png);
background-repeat: no-repeat;
}
在瀏覽器中演示效果為：
上述示例中，如果我們希望整張背景圖片都充滿整個頁面，可以使用 background-size 屬性來實現，此屬性用于設置背景圖像的尺寸。
可選的屬性值如下所示：
示例：
例如我們將背景圖片設置為覆蓋全部背景區(qū)域，可以使用 cover 屬性值：
body{
background-image: url(./flower.png);
background-repeat: no-repeat;
background-size: cover;
}
在瀏覽器中演示效果為：
背景定位就是我們可以根據需求將背景圖片定位到頁面的左邊、右邊、中間、底部等等任意位置，要實現背景定義，可以使用 background-position 屬性。
可選的屬性值如下所示：
屬性值描述top、bottom、left、right 、 center通常這些關鍵字會成對出現，如果只設置一個關鍵字，那么第二個值將默認為 centerx% y%將屬性值設置成百分比，第一個值是水平位置，第二個值是垂直位置xpos ypos單位是像素，第一個值是水平位置，第二個值是垂直位置
示例：
例如將背景圖片定位到水平垂直居中位置：
body{
background-image: url(./flower.png);
background-repeat: no-repeat;
background-position: center;
}
在瀏覽器中演示效果為：
上述代碼中，我們將 background-position 的屬性值設置成了 center，并且因為此屬性的屬性值是成對出現的，如果沒有設置第二個屬性值，則其默認為 center，所以最終背景圖片會水平垂直居中顯示。
你可以自己動手設置 background-position 屬性的值，例如將背景圖片定位為 bottom right、100px 200px、30% 70%，看看這三組屬性值最終會生成什么效果。
我們知道當頁面的內容超出了瀏覽器的高度時，瀏覽器會自動出現滾動條。如果我們給某個頁面設置了一個背景圖像，隨著滾動條向下滾動，背景圖片也會跟著滾動，大家可以自己動手驗證一下看看是不是這樣。
所以如果我們希望背景圖片固定在某個地方，當我們滾動滾動條時，不影響背景圖片，要怎么辦呢？
可以通過 background-attachment 屬性來實現，此屬性的作用就是用于設置背景圖片是否固定或者隨著頁面的其余部分滾動。
可選的屬性值如下所示：
示例：
將背景圖片設置為固定，不隨滾動條滾動：
body{
background-image: url(./flower.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
在瀏覽器中演示效果為：
可以看到當我們將 background-attachment 屬性設置為 fixed 時，向下滾動滾動條時，背景圖像是固定不變的。
我們可以通過 background 屬性來簡寫上述講到的幾個背景樣式屬性。
background 屬性可以簡寫的屬性有如下所示 ：
在 background 屬性中設置上述任意一個或多個屬性的屬性值，如果不設置其中的某個值，也不會出問題。
示例：
例如可以在 background 屬性中同時設置頁面背景顏色、背景圖片、圖片不平鋪、圖片固定、圖片居中：
body{
background: pink url(./flower.png) no-repeat fixed center;
}
在瀏覽器中演示效果為：
上圖中，如果我們不使用簡寫屬性，則需要寫 5 句 CSS 代碼才能實現，但是通過使用 background 屬性一句代碼就搞定了，方便了很多。所以推薦使用 background 屬性來設置背景樣式。
那么本節(jié)我們關于背景樣式的內容就學到這里，其實這些屬性都很簡單，大家可以將上述講到的幾個屬性多使用幾次，給它們設置不同的屬性值，看看不同的屬性值的演示效果有什么不同。
嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變?yōu)閃eb前端高手哦！
志同道合的小伙伴跟我一起學習交流哦！?
1 背景顏色圖片及其平鋪
背景顏色background
CSS可以添加背景顏色和背景圖片，以及來進行圖片設置。
格式與用法如下：
div {
width: 500px;
height: 500px;
background-color: pink;
background-image: url(images/l.jpg);
background-repeat: no-repeat;
}
sublime小技巧：“bgc+tab”=background-color
其他的以此類推
2 背景位置（一）
背景位置position
語法：
background-position: length length;
background-position: position position;
background-position: left top;/*默認的是在左上角*/
background-position: bottom right;/*方位名詞沒有順序，誰都在前都可以*/
background-position: left;/*如果方位名詞只寫一個，另一個默認為center*/
參數：
length：百分數丨由浮點數字和單位標識符組成的長度值。請參閱長度單位position:top center bottom left right
3 背景位置（二）
精確單位：
background-position: 10px 30px;
/*第一個值一定是x坐標 第二個值一定是y坐標*/
background-position: 10 center;
/*混搭*/
4 魔獸背景圖片
想讓圖片往上移，可以是負數值
background-image: url(images/ms.jpg);
background-position: center -25px;
實際上用的最多的就是居中對齊
5 背景附著圖
語法：
background-attachment: scroll、 fixed;
參數：
scroll：背景圖像是隨對象內容滾動
fixed：背景圖像固定
說明：
設置或檢索背景圖像是隨對象內容滾動還是固定的。
6 背景簡寫
background屬性的值的書寫順序官方并沒有強制標準的。為了可讀性，建議大家如下寫：
background背景顏色-背景圖片地址-背景平鋪-背景滾動-背景位置background:transparent url（image jpg） repeat-y scroll 50%0：
background: #000 url(images/lol.jpg) no-repeat fixed center 100px;
黑色 圖片地址 不平鋪 水平居中 垂直100像素
后面的兩個位置值是不能分開的
7 背景半透明
CSS3支持背景半透明的寫法語法格式是
background: rgba(0, 0, 0, 0.7);
最后一個參數是 alpha透明度取值范圍0-1之間
注意：背景半透明是指盒子背景半透明，盒子里面的內容不受影響。
同樣，可以給文字和邊框透明都是rgba的格式來寫。
8 背景縮放（一）
通過 background-size設置背景圖片的尺寸，就像我們設置img的尺寸一樣，在移動Web開發(fā)中做屏幕適配應用非常廣泛。
其參數設置如下：
a）可以設置長度單位（px）或百分比（設置百分比時，參照盒子的寬高）
background-size:50% ;
背景圖片設置為原來的50%大小
9 背景縮放（二）
b）設置為 cover時，會自動調整縮放比例，保證圖片始終填充滿背景區(qū)堿，如有溢出部分則會被隱藏。
C）設置為 contain會自動調整縮放比例，保證圖片始終完整顯示在背景區(qū)域。
10 多背影圖片
以逗號分隔可以設置多背景，可用于自適應布局做法就是用逗號隔開就好了。
1 一個元素可以設置多重背景圖像。
2 每組屬性間使用逗號分隔。
3 如果設置的多重背景圖之間存在著交集（即存在著重疊關系），前面的背景圖會覆蓋在后面的背景圖之上。
4 為了避免背景色將圖像蓋住，背景色通常都定義在最后一組上
div {
height: 300px height:300px;
background: url(images/l.jpg) no-repeat left top,
url(images/3.jpg) no-repeat right bottom hotpink
11 凹凸文字效果
12 王者榮耀導航欄（一）
13 王者榮耀導航欄（二）
文本的裝飾
text-decoration通常我們用于給鏈接修改裝飾效果
使用技巧：在一行內的盒子內，我們設定行高等于盒子的高度，就可以使文字垂直居中
看不懂的小伙伴不要氣餒，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。
本章已結束，下篇文章將分享《09 CSS三大特性》小伙伴們不要錯過喲！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
