整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
CSS中，背景樣式主要包括背景顏色和背景圖像。在傳統的布局中，只能使用少數的標簽來定義背景圖像和背景顏色。但是隨著Web2.0時代的到來，設置背景樣式不再使用傳統HTML屬性來定義，轉而使用無限制、更靈活的CSS來定義。
目標
在CSS中，使用background-color屬性來定義元素的背景顏色。
語法：background-color:顏色值;
說明：顏色值是一個關鍵字或一個16進制的RGB值。
HTML標簽
背景顏色設置
效果
在CSS中，使用background-image屬性來定義元素的背景圖片。
語法：background-image:url("圖像地址");
說明：圖像地址可以是相對地址，也可以是絕對地址。
注意：給某個元素設置背景圖像，元素要有一定的寬度和高度，背景圖片才會顯示出來。如果設置的元素的寬高過小，背景圖片就無法完整地顯示出來了。
設置背景圖片
效果
在CSS中，使用background-repeat屬性可以設置背景圖像是否平鋪，并且可以設置如何平鋪。
語法：background-repeat:取值;
取值
當值是repeat，全屏覆蓋
全屏覆蓋
當值是repeat-x，x軸方向覆蓋
x軸方向覆蓋
當值是repeat-y，y軸方向覆蓋
y軸方向覆蓋
當值是no-repeat，不復制
不復制
在CSS中，使用background-position設置背景圖像的位置
語法：background-positon:像素值/關鍵字;
說明：語法中的取值包括兩種，一種是采用像素值，另一種是關鍵字描述。
1. 像素值
要設置水平方向數值（x軸）和垂直方向數值（y軸），參數如下
取值
假設設置一個距離左上角水平方向100px，垂直方向100px
背景圖片位置設置
效果如下
效果
2. 關鍵字
當background-position取值為關鍵字時，也需要設置水平方向和垂直方向的值，只不過值不是使用px為單位的數值，而是使用關鍵字代替。
取值
假設我們要設置一個水平方向、垂直方向都居中的位置，就可以這樣設置
背景圖片位置設置
這樣他就永遠都處于屏幕的正中間
效果
在CSS中，使用背景附件屬性background-attachment可以設置背景圖像是隨對象滾動還是固定不動
語法：background-attachment:scroll/fixed;
說明：background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動，是默認選項；fixed表示背景圖像固定在頁面不動，只有其他的內容隨滾動條滾動。
背景固定設置
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
/*總體的樣式*/
<style>
/*盒子樣式*/
#box{
width: 350px; //寬
height: 450px; //高
border: 1px solid black; //邊框
border-radius: 10px; //邊框弧度
font-family: 黑體; //字體
letter-spacing:8px; //段間距
word-spacing: 10px; //字間距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //內邊框
}
/*給'注冊'賦予樣式*/
.register{
width:280px ; //寬
height: 50px; //高
background-color: skyblue; //背景顏色
border-radius: 10px; //邊框弧度
}
/*將所有邊框都改變*/
*{
border-radius: 5px; 邊框弧度
}
/*使用class選擇器，賦予number寬高和邊框*/
.number{
width: 185px; //寬
height: 27px; //高
border-width: 1px; //邊框寬度
}
/*id選擇器*/
#two{
width: 55px; //寬
border-width: 1px; 邊框寬度
}
/*id選擇器*/
#phone{
width: 103px; //寬
}
/*class 選擇器*/
.boxs{
zoom: 75%; //清除浮動
color: darkgray; //顏色
}
/*class選擇器*/
.box_a{
width: 50px; //寬
height: 50px; //高
background-image: url("../image/04.jpg "); //背景圖片
background-repeat: no-repeat; // 是否平鋪
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相對定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
<label for="name">用戶名</label>
<input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
<label for="phone">手機號</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
<label for="mima">密?碼</label>
<input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
<label for="mima">驗證碼</label>
<input type="password" placeholder="請輸入驗證碼" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">閱讀并接受協議<br>
</div>
<input type="submit" value="注冊" class="register" >
</form>
</div>
</body>
</html>
在這里插入圖片描述望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
【技術等級】初級
【承接文章】《圖片在容器中產生的底部間隔，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教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上也已經寫了有七八篇文章了。這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
