background c3屬性
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);
1.2 background-image
用於給盒子加上背景圖片。背景天生是會被鋪滿的。
background:url(images/1.jpg);
1
1.3 background-repeat
設定背景圖是否重複的,重複方式的。
background-repeat:no-repeat; 不重複
background-repeat:repeat-x; 橫向重複
background-repeat:repeat-y; 縱向重複
1.4 background-position
背景定位屬性
background-position:向右移動量 向下移動量
1
用單詞描述:
描述左右的詞: 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 多重背景
背景圖片之間用逗號隔開,可以寫多組,最先渲染的圖片有可能會遮住後面渲染的圖片。
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;
1
2.3 控制背景圖片的大小(background-size)
background-size:值
取值:
**長度值**px
百分比:以盒子寬度為參照
auto:背景圖片的真實大小
contain:完全顯示(當圖片的寬度或是高度在縮放的時候有一個“碰到“了盒子的邊緣,則停止變化)
cover:完全鋪滿(將背景影象等比縮放到完全覆蓋容器,背景影象有可能超出容器)
當只有一個值,如寬度實現拉伸,高度會預設auto,保持等比例。
當有兩個值,寬度和高度會分別拉伸到對應的值,可能會變形。
補充:還有一個很有趣的C3新增背景相關屬性
background-repeat:round;