CSS3中關於新增背景系列background的詳解

1. 回顧一下之前學習過的background屬性

1.1 background-color
1.2 background-image
1.3 background-repeat
1.4 background-position
1.5 background-attchment
1.6 background

2. CSS3新增的background屬性

2.1 background-origin
2.2 多重背景
2.3 background-size

1.1 背景顏色屬性：background-color

顏色的表示方法有3種：單詞、rgb標記法、十六進位標記法

1. 單詞： 能夠用單詞來表述的，都是簡單顏色

2. rgb標記法

rgb表示三原色“紅”red、“綠”green、“藍”blue 。
光學顯示器，每個像素都是由三原色的發光原件組成的，靠明亮度不同調成不同的顏色的。

用逗號隔開，r、g、b的值，每個值的取值範圍0~255，一共256個值

綠色：background-color: rgb(0,255,0);  藍色：background-color: rgb(0,0,255);黑色：（光學顯示器，每個元件都不發光，黑色）background-color: rgb(0,0,0);

3. 十六進位標記法

所有用#開頭的值，都是16進位的。

紅色：background-color: #ff0000;16進位標記法，也是兩位兩位看，看r、g、b，但是沒有逗號隔開。ff就是10進位的255 ，00 就是10進位的0，00就是10進位的0。所以等價於rgb(255,0,0);

補充：
十進位中的基本數字（一共10個）：0、1、2、3、4、5、6、7、8、9
十六進位中的基本數字（一共16個）：0、1、2、3、4、5、6、7、8、9、a、b、c、d、d、e、f

十六進位中，13 這個數字表示什嗎？
表示1個16和3個1。 那就是19。 這就是位權的概念，開頭這位表示多少個16，末尾這位表示多少個1。

1.2 background-image

用於給盒子加上背景圖片。背景天生是會被鋪滿的。

background:url(images/1.jpg);

1.3 background-repeat

設定背景圖是否重複的，重複方式的。

background-repeat:no-repeat; 不重複 background-repeat:repeat-x; 橫向重複 background-repeat:repeat-y; 縱向重複

1.4 background-position

背景定位屬性

background-position:向右移動量 向下移動量

用單詞描述：

描述左右的詞： left、 center、right
描述上下的詞： top 、center、bottom

右下角：background-position: right bottom;

1.5 背景圖片是否滾動（background-attchment）

scroll：滾動。預設值 fixed：固定。不會隨著捲軸的滾動而滾動 local

1.6 background綜和屬性

background屬性和border一樣，是一個綜合屬性：

background:red url(1.jpg) no-repeat 100px 100px fixed;等價於：background-color:red;background-image:url(1.jpg);background-repeat:no-repeat;background-position:100px 100px;background-attachment:fixed;

可以任意省略部分：

background: red;

如果盒子又有背景圖片，又有背景顏色。實際上以顯示圖片為主，富裕的地方，用顏色填充。

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

2.1 背景圖片的基準點（background-origin）

border-box： 忽略邊框，直接從邊框的起始0，0點開始平鋪 padding-box：預設值，忽略padding，直接從padding的起始0,0點開始平鋪 content-box：從內容部分開始平鋪，會預留出padding的位置。所以說padding會對它造成影響

2.2 多重背景

CSS3-新增背景系列background。背景圖片之間用逗號隔開，可以寫多組，最先渲染的圖片有可能會遮住後面渲染的圖片。

background:  url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

2.3 控制背景圖片的大小（background-size）

background-size:值

取值：

**長度值**px 百分比：以盒子寬度為參照 auto：背景圖片的真實大小

contain：完全顯示（當圖片的寬度或是高度在縮放的時候有一個“碰到“了盒子的邊緣，則停止變化）

cover：完全鋪滿（將背景映像等比縮放到完全覆蓋容器，背景映像有可能超出容器）

當只有一個值，如寬度實現展開，高度會預設auto，保持等比例。
當有兩個值，寬度和高度會分別展開到對應的值，可能會變形。