本文內容：
1.背景圖片定位示例
2.background常用的屬性值
3.background-repeat新增的round、space屬性
4.background-size的屬性值（着重介紹contain、cover）
5.background-origin屬性值（borde-box、padding-box、content-box）
6.多背景圖片示例
背景圖片定位（background-position）原理
A. 語法：Background-position:水平位置 垂直位置
B. 水平位置/垂直位置設置方法：
1） 數值（px）正負值都可以，正數值表示向右移動或向下移動，負數值表示向左或向上移動；
2） 百分比（%）范圍：0%—100%
3） 關鍵詞：水平位置：left(左) center(中) right(右)
垂直位置：top(上) center(中) bottom(下)
默認情況下，background-position的原點位於左上角，換句話說，元素的左上角和圖片的左上角是對齊的，隨后圖片向各個方向重復，都是以左上角為起點。
注意：當只設置一個值時：代表水平位置，垂直位置默認居中
<style>input[type="button"]{width:100px;height:56px;border-radius:10px;}.btn1{background-image: url("allbgs2.png");background-position:21px355px;/*第一，第二屬性值表示以圖片左上角（left top）位置為原點的坐標（21px,355px），即向右移動21px，向下移動355px*/}.btn2{background-repeat:no-repeat;background-image: url("allbgs2.png");background-position:21px-175px;/*（21px,-225px）,即向右移動21px，向上移動-175px*/}img{width:100px;. height:200 px;}img:hover{height:auto;width:auto;}</style><form><inputtype="button"class="btn1"><inputtype="button"class="btn2"><br/><imgsrc="allbgs2.png"><small>原背景圖</small></form>
效果圖
CSS常用背景屬性
background-color 背景顏色；
background-image 背景圖片
background-repeat 背景圖片重復方式
background-position 背景圖片位置
background-size 背景大小
background-attachment 背景圖片滾動控制
background-clip:conten-box || padding-box || border-box 規定背景的繪制區域,注意提前設置好padding數值，這樣能夠效果更加明顯。
background-origin 背景的定位“原點”
背景屬性的縮寫 backgroud：green url（“image/background.jpg”） top left
CSS3中為background-repeat提供了兩個額外值，round、space。
測試代碼
<style>figcaption{font-size:25px;}div.div1{background-color: aliceblue;width:50px;height:100px;background: url(".idea/pdf_icon.gif");border: solid 1px royalblue;background-repeat: space;/*space 盡可能地重復圖片以占滿背景，不行時則加大圖片的邊距*/}div.div2{background-color: aliceblue;width:50px;height:100px;background: url(".idea/pdf_icon.gif");border: solid 1px royalblue;background-repeat: round;/*round 盡可能地重復圖片以占滿背景，不行時則拉伸圖片*/}</style><figure><figcaption>origin</figcaption><imgsrc=".idea/pdf_icon.gif"></figure><h3>background-repeat屬性值space</h3><divclass="div1"></div><hrcolor="darkgray"/><h3>background-repeat屬性值round</h3><divclass="div2"></div>
背景尺寸設置1
background-size:50%;
background-size:100px 50px;
測試代碼
<style>div.div1{width:120px;height:50px;background:url("Desert.jpg")no-repeat;background-size:50%;/*將背景圖像縮放成父級元素的50%，主要是背景圖片的width是父級元素width的一半*/border:1px solid #00408f;}div.div2{width:100px;height:50px;background: url("Desert.jpg");background-size:100px50px;/*將背景圖像設置成寬度為100px,高度為50px*/border:2px solid #00408f;box-shadow:12px10px5px gray;}</style><divclass="div1"></div><divclass="div2"></div><br/><imgsrc="Desert.jpg">
效果圖
背景尺寸設置2
background-size:cover
拉大圖片，使背景圖片完全填滿父級容器，並保持寬高比例
background-size:contain
縮放圖片，使背景圖片恰好適合背景區，保持寬高比例
指定設定background-origin屬性，可以指定背景圖片原點位置。
（
參考盒子模型
）
）
background-origin:border-box,默認值，以邊框左上角為原點；
background-origin:padding-box,去掉padding之后為原點；
background-origin:content-box,以內容區域為原點；
示例
聯想：背景裁剪
backgroun-clip控制背景繪制區域，比如可以讓背景色和背景圖片只出現在內容區域(content-box)，而不出現內邊框區域(padding-content)。默認情況下，背景繪制區是擴展到邊框外邊距的（margain）。
background-clip的屬性值border-box，padding-box，content-box的用法與backgroun-origin類似
示例
<styletype="text/css">body {margin:0;padding:0;font:100%Georgia,"Times New Roman",Times, serif;background:#3c6b92;}#wrapper {margin:0auto;width:960px;height:400px;background:#fff;padding:50px00200px;}#wrapper div {float: left;margin-right:50px;background:#e1d8b9;padding:25px;}#wrapper #one {width:150px;height:150px;border:10px solid rgba(212,178,220,.8);background:#e1d8b9 url(star_icon_large.png) no-repeat;/*因為背景圖片是透明的，所以設置了背景顏色*//*在此試驗各種值，比如border-box*/background-clip: content-box;/*background-clip: padding-box;background-clip: border-box;*/}</style></head><body><divid="wrapper"><divid="one"></div><span>content-box</span></div></body>
復合背景色
多背景示例
