一、背景的基本屬性
背景主要包括五個(gè)屬性：
- background-color（背景顏色）
- background-image（背景圖片）
- background-repeat（背景圖片展示方式）
- background-attachment（背景圖片是固定還是滾動(dòng)）
- background-position（背景圖片位置）
可以單獨(dú)寫(xiě)琉闪，也可以將這些屬性串在一起寫(xiě)抑钟。
語(yǔ)法規(guī)則：
background：<background-color>
<background-image>
<background-repeat>
<background-attachment>
<background-position>
1篓叶、background-color屬性
語(yǔ)法：background-color：transparent||<color>
默認(rèn)值為transparent艺玲，不設(shè)置任何顏色值情況下是透明色。
常用的顏色格式是：
- 顏色名：如red
- rgb色：如rgb(255,0,0)或rgb(100%,0%,0%)
- hls值：如hls(0,100%,50%)
- 十六進(jìn)制值：如#eee
- rgba：如rgba(255,0,0,0.3)
- hsla：如hsla(0,100%,50%,0.5)
2斑胜、background-image屬性
語(yǔ)法：background-image:none||url
url是背景圖片的地址，支持相對(duì)地址或絕對(duì)地址
3嫌吠、background-repeat屬性
語(yǔ)法：background-repeat:repeat||repeat-x||repeat-y||no-repeat
參數(shù)說(shuō)明：
- repeat：背景圖片沿元素的X軸和Y軸同時(shí)平鋪
- repeat-x：背景圖片沿元素的X軸平鋪止潘，Y軸不進(jìn)行任何鋪放
- repeat-y：背景圖片沿元素的Y軸平鋪，X軸不進(jìn)行任何鋪放
- no-repeat：背景圖片不做任何鋪放
4辫诅、background-attachment屬性
語(yǔ)法：background-attachment:scroll||fixed
用來(lái)設(shè)置元素背景圖片是否固定或者隨著頁(yè)面的其余部分滾動(dòng)凭戴。
- scroll：默認(rèn)值，表示背景圖片會(huì)隨著瀏覽器滾動(dòng)條一起滾動(dòng)
- fixed：表示背景圖片固定不動(dòng)
注意：background-attachment取值為fixed時(shí)炕矮，一般運(yùn)用在html或body標(biāo)簽上么夫，使用在其它標(biāo)簽上不能達(dá)到固定效果。
5肤视、background-position屬性
語(yǔ)法：
background-position:<percentage>||
<length>||
[left|center|right]
[,top|center|bottom]
用來(lái)設(shè)置元素背景圖片的位置档痪，默認(rèn)值是(0,0)||(0%,0%)||(left top)值可以是具體的百分?jǐn)?shù)或數(shù)值設(shè)置（可以是負(fù)值），也可以使用關(guān)鍵詞left邢滑、center腐螟、right、top困后、bottom配合設(shè)置乐纸。
（1）top left、left top和0% 0%摇予、0 0
表示元素背景圖片的起點(diǎn)位置與元素的左上角吻合
（2）top汽绢、top center、center top和50% 0
表示元素背景圖片的頂邊中心點(diǎn)與元素的頂邊中心點(diǎn)吻合
（3）right top侧戴、top right和100% 0
表示元素背景圖片的右上頂點(diǎn)與元素右上頂點(diǎn)吻合
（4）right宁昭、right center、center right和100% 50%
表示元素背景圖片右邊中心點(diǎn)與元素右邊中心點(diǎn)吻合
（5）bottom right救鲤、right bottom和100 % 100%
表示元素背景圖片右下頂角與元素右下角吻合
（6）bottom久窟、bottom center、center bottom和50% 100%
表示元素背景圖片底邊中心點(diǎn)與元素底邊中心點(diǎn)吻合
（7）bottom left本缠、left bottom和0% 100%
表示元素背景圖片的左下角與元素左下角吻合
（8）left斥扛、left center、center left和0% 50%
表示元素背景圖片的左邊中心點(diǎn)與元素左邊中心點(diǎn)吻合
（9）center、center center和50% 50%
表示元素背景圖片正中心點(diǎn)與元素正中心點(diǎn)吻合
二稀颁、與背景相關(guān)的新增屬性
- background-origin：指定繪制背景圖片的起點(diǎn)
- background-clip：指定背景圖片的顯示范圍
- background-size：指定背景圖片的尺寸大小
- background-break：指定內(nèi)聯(lián)元素的背景圖片進(jìn)行平鋪時(shí)的循環(huán)方式
1芬失、background-origin屬性
background-origin主要用來(lái)決定background-position屬性的參考原點(diǎn)，即決定背景圖片定位的起點(diǎn)匾灶。
語(yǔ)法：background-origin:padding-box||border-box||content-box
屬性值說(shuō)明：
- padding-box：默認(rèn)值棱烂，決定background-position起始位置從padding的外邊緣開(kāi)始顯示背景圖片
- border-box：決定background-position起始位置從border的外邊緣開(kāi)始顯示背景圖片
- content-box：決定background-position起始位置從content的外邊緣開(kāi)始顯示背景圖片
示例效果圖：
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css測(cè)試</title>
<style>
div {
width: 300px;
height: 200px;
border: 20px dashed rgba(0, 0, 0, 0.3);
background: orange url(img/a5.png) no-repeat left top;
padding: 20px;
margin: 30px;
}
.padding-box {
-webkit-background-origin: padding-box;
-moz-background-origin: padding-box;
-o-background-origin: padding-box;
-ms-background-origin: padding-box;
background-origin: padding-box;
}
.border-box{
-webkit-background-origin:border-box;
-moz-background-origin:border-box;
-o-background-origin:border-box;
-ms-background-origin:border-box;
background-origin:border-box;
}
.content-box{
-webkit-background-origin:content-box;
-moz-background-origin:content-box;
-o-background-origin:content-box;
-ms-background-origin:content-box;
background-origin:content-box;
}
</style>
</head>
<body>
<div class="padding-box"></div>
<div class="border-box"></div>
<div class="content-box"></div>
</body>
</html>
2、background-clip屬性
background-clip屬性用來(lái)定義背景圖像的裁剪區(qū)域阶女。
語(yǔ)法：background-clip:padding-box||border-box||content-box
屬性值說(shuō)明：
- padding-box：背景延伸到padding的外邊緣颊糜，但不會(huì)超出邊框的范圍
- border-box：默認(rèn)值，背景圖片在邊框下
- content-box：背景僅在內(nèi)容區(qū)域繪制秃踩，不會(huì)超出padding和邊框的范圍
示例效果圖：
示例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css測(cè)試</title>
<style>
div {
width: 300px;
height: 200px;
border: 20px dashed rgba(0, 0, 0, 0.3);
background: orange url(img/a5.png) no-repeat left top;
padding: 20px;
margin: 30px;
display: inline-block;
}
.padding-box {
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
-o-background-clip: padding-box;
-ms-background-clip: padding-box;
background-clip: padding-box;
}
.border-box {
-webkit-background-clip: border-box;
-moz-background-clip: border-box;
-o-background-clip: border-box;
-ms-background-clip: border-box;
background-clip: border-box;
}
.content-box {
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
-o-background-clip: content-box;
-ms-background-clip: content-box;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="padding-box"></div>
<div class="border-box"></div>
<div class="content-box"></div>
</body>
</html>
3衬鱼、background-size屬性
background-size用來(lái)指定背景圖像的尺寸，可以控制背景圖片在水平和垂直兩個(gè)方向的縮放憔杨，也可以控制圖片拉伸覆蓋背景區(qū)域的方式鸟赫。
背景圖片能夠自適應(yīng)元素盒子的大小，實(shí)現(xiàn)與模塊大小完全適應(yīng)的背景圖片消别，避免了因區(qū)塊尺寸不同而需要設(shè)計(jì)不同的背景圖片抛蚤。
語(yǔ)法：background-size:auto||<length>||<percentage>||cover||contain
屬性值說(shuō)明：
- auto：默認(rèn)值，保持背景圖片的原始高度和寬度
- <length>：取具體的整數(shù)值寻狂，將改變背景圖片的大小
- <percentage>：取百分值岁经，改變背景圖片的大小，但是相對(duì)于元素的寬度進(jìn)行的計(jì)算荆虱，并不是根據(jù)背景圖片的寬度來(lái)進(jìn)行計(jì)算
- cover：將背景圖片放大蒿偎，以適合鋪滿整個(gè)容器。會(huì)使背景圖片失真怀读。
- contain：保持背景圖片本身的寬高比例诉位，將背景圖片縮放到寬度或高度正好適應(yīng)所定義背景容器的區(qū)域。
使用示例：
div {
width: 320px;
height: 270px;
border: solid red 1px;
background: url(img/a5.png) no-repeat;
background-size:50% 80%;
}
效果圖：
使用示例2：
div {
width: 320px;
height: 270px;
border: solid red 1px;
background: url(img/a5.png) no-repeat center;
background-size:cover
}
效果圖2：
background-size:cover配合background-position:center常用來(lái)制作滿屏背景效果菜枷。
使用示例3：
div {
width: 320px;
height: 270px;
border: solid red 1px;
background: url(img/a5.png) no-repeat;
background-size:contain;
}
使用效果圖3：
整個(gè)背景圖像根據(jù)背景區(qū)域?qū)Ρ尘皥D像進(jìn)行了寬高比例的縮放苍糠。contain在某些情況之下無(wú)法讓背景圖像填充整個(gè)容器的大小。
只有當(dāng)background-size的值為auto時(shí)啤誊，背景圖像才不會(huì)失真岳瞭，其他值都會(huì)不同程度的造成背景圖像的失真，使用時(shí)請(qǐng)仔細(xì)考慮蚊锹。
