CSS3 Background

background-color : red;
background-color : rgb(255,0,0);
background-color : #FF0000

background-color : transparent;

background-color : rgba( 255,0,0,.5);

background-color : url ( image.jpg )

background-position : 0 0;  //默認(rèn)值
background-position : 0 50px;  //向下偏移50px
background-position : 50px 0;  //向右偏移50px
background-position : -50px 0;  //向左偏移50px

background-position :center center；

background-position : 50% 50%;  //居中

background-repeat: repeat;  // 默認(rèn)值，在水平和垂直方向平鋪 
background-repeat: no-repeat; //不平鋪。圖片只展示一次。
background-repeat: repeat-x; // 水平方向平鋪(沿 x 軸) 
background-repeat: repeat-y; // 垂直方向平鋪(沿 y 軸) 
background-repeat: inherit; //繼承父元素的 background-repeat 屬性
/*css3中新增*/
background-repeat : space;  //應(yīng)用同等數(shù)量的空白到圖片之間，直到填滿整個元素
background-repeat : round; //縮小圖片直到正好平鋪滿元素

六、多個背景

CSS3 中，可以對一個元素定義一個或多個圖片作為背景。以列表的形式連在一起，用逗號來區(qū)別各個圖片。第一個聲明的圖片定位在元素頂部，其它的圖片按序在其下排列

background-image : url (top.jpg) , url(middle.jpg) ,  url(bottom.jpg);

七、background-clip（背景修剪）

能夠控制背景顯示的位置

 background-clip: border-box;  //背景顯示在邊框內(nèi)。
background-clip: padding-box;  //背景顯示在內(nèi)補(bǔ)白(padding)內(nèi)，而不是邊框內(nèi)。
background-clip: content-box; //只在內(nèi)容內(nèi)顯示背景，而不是內(nèi)補(bǔ)白(padding)和邊框內(nèi)。
 background-clip: no-clip;  //默認(rèn)值，和 border-box 一樣。
background-clip: text;  //文本裁剪

八、background-origin

背景原點；此屬性需要與background-position配合使用。你可以用background-position計算定位是從border，padding或content boxes內(nèi)容區(qū)域算起。（類似background-clip）

 background-origin: border-box; //以邊框為原點開始計算 background-position.
 background-origin: padding-box; //以內(nèi)補(bǔ)白為原點開始計算 background-position
 background-origin: content-box; //以內(nèi)容盒子為原點開始計算 background-position

例子：

/*統(tǒng)一樣式*/
background-image:url(wolf.jpg);
background-color:red;
background-repeat:no-repeat;
background-size:100% 100%;
padding:10px;
background-position: 0 0;
border:10px solid rgba(0,0,0,.5);

background-origin : padding-box;  //默認(rèn)值
background-origin:padding-box;  //對應(yīng)第二張
background-origin :border-box;  //對應(yīng)第三張
background-origin : content-box;  //對應(yīng)第四張

九、background-size

background-size 用來調(diào)整背景圖的大小

background-size: contain;//縮小圖片來適應(yīng)元素的尺寸(保持像素的長寬比)
background-size: cover;//擴(kuò)展圖片來填滿元素(保持像素的長寬比)
 background-size: 100px 100px;//調(diào)整圖片到指定大小
 background-size: 50% 100%;  //調(diào)整圖片到指定大小。百分比是相對于包含元素的尺寸的。