css之背景(background)家族

背景(background)是css中很重要的一部分，也是css的基礎知道之一，如今來回顧css2中5個屬性與css3中新增的3個屬性和2個功能。

CSS2_背景(background)前傳

家族成員

背景(background)家族在css2中由5個主要的背景屬性組成，分別是：

background-color 　　　　　　指定填充的背景顏色
background-image 　　　　　　引用圖片做爲背景圖
background-position　　 　　指定元素背景圖片的位置
background-repeat 　　　　  決定背景圖是否是平鋪
background-attachment 　　 背景圖是否滾動　　

想知道家族五大成員的詳細身份吧，欲知詳情，趕忙找個位置坐下，靜靜地聽我吹牛逼！

background-color 背景顏色

　　該成員只能用純色來填充背景。

background-color: colorName ;　 

colorName的取值： 
　　　　（1）顏色名 ： red、green、blue、skyblue……
　　　　（2）rgb() ： rgb(255,255,255)、rgb(12,202,29)……
　　　　（3）十六進制顏色值 ： #000000、#ffffff、#ff6600……
　　　　 特別取值（默認）： 　　　　
　　   　　（4）透明 ： transparent;　　//背景透明　

background-image 背景圖

　　該成員容許指定圖片來做爲背景。

background-image:url(imagePath) ;     //imagePath指圖片路徑(相對路徑和絕對路徑)

最佳實踐：與（background-color）聯合使用，可保證在出現下面幾種狀況下，有背景色能夠填充：

　　　　a> 圖片出不來(可能路徑錯、圖片不存在)；
　　　　b> 圖片被誤刪除；
　　　　c> 圖片在不平鋪的狀況下覆蓋不了整個盒子；

background-repeat 背景平鋪

　　設置背景圖片時，該成員會默認把圖片在水平和垂直方向平鋪以鋪滿整個盒子。

background-repeat: propertyValue ;   //propertyValue指屬性值

propertyValue的取值：
　　　　(1)repeat :　　　　(默認)平鋪
　　　　(2)no-repaet :　　 不平鋪
　　　　(3)repeat-x :　　　水平方向平鋪
　　　　(4)repeat-y :     垂直方向平鋪

background-position 背景定位

　　該成員控制背景圖片在盒子中的位置，即：背景圖片左上角相對於盒子左上角的位置。

background-position:X-coordinate Y-coordinate ;        //(水平方向座標 垂直方向座標)

屬性的取值：
　　（1）百分比：10% ……
　　（2）像素值：10px ……
　　（3）方位名詞：
　　　　　　水平方向：left right center
　　　　　　垂直方向：top bottom center　

　　默認取值三種表達方式:

　　　background-position: left top ;
　　　background-position: 0px 0px ;
　　　background-position: 0% 0% ;

特別說明：

　　背景定位在使用百分數時，瀏覽器是以盒子尺寸的百分比數值來設置圖片的位置，舉例說明：

background-position: 40% 50% ;

　　40%指:背景圖在水平方向40%的位置，對應到該盒子水平方向40%的位置
　　50%指:背景圖在垂直方向50%的位置，對應到該盒子垂直方向50%的位置

background-attachment 背景依附

　　該成員決定背景圖像是否固定或者隨着頁面的其他部分滾動。

background-attachment:status     //背景依附狀態

status的取值：
　　（1）scroll ：  滾動(默認)，背景圖會隨着頁面其他部分的滾動而滾動
　　（2）fixed ：　 固定，當頁面的其他部分滾動時，背景圖不會滾動
　　（3）inherit：  從父元素繼承background-attachment屬性的設置（不多用）

CSS3_背景(background)後傳

CSS3不只爲背景家族新增3位成員，還爲背景家族擴展了2個重要的功能。

知識點驛站:

　　CSS3的牽頭人並非W3C，而是由各大瀏覽器廠商組成的WHATWG組織，後來才被W3C所採納。所以，CSS3的新屬性在被W3C採納先後的書寫有所不一樣。

　　在被W3C採納以前，若是瀏覽器想支持該屬性，須要加瀏覽器的私有前綴（瀏覽器所採用的內核），以表示這是瀏覽器的私有屬性，並不是W3C的官方屬性。所以，在實際工做中，你得這麼寫（以background-origin爲例）：

-webkit-background-origin: ;
-moz-background-origin: ;
-ms-background-origin: ;
-o-background-origin: ;  　　//加上瀏覽器私有前綴的寫法
background-origin: ; 　　　　//W3C寫法，必須帶上

（一）家族新成員

　　先來瞧瞧背景家族新增的位成員吧，很帥很靚很神祕：

background-origin 　　背景起源
background-size 　　  背景大小
background-clip 　　  背景裁切

　　接下來，老司機開車時間，請坐好抓好扶手！！

background-origin 背景起源

　　該成員決定了背景圖的定位相對於盒子的哪部分區域而言，一般和background-position聯合使用。

　　默認狀況下，背景圖是相對於盒子的內邊距（padding）進行定位的！可是，在css3中規格背景圖還能夠相對於盒子的邊框（border）和內容（content）進行定位。

-webkit-background-origin: positionArea ;     //positionArea指定位區域
-moz-background-origin: positionArea ;
-ms-background-origin: positionArea ;
-o-background-origin: positionArea ;
background-origin: positionArea ;

positionArea的取值：
　　（1）padding-box ： 背景圖相對於盒子的內邊距進行定位(默認)
　　（2）border-box :   背景圖相對於盒子的邊框進行定位
　　（3）content-box :  背景圖相對於盒子的內容進行定位

特別說明：

　　a> 該成員從IE9開始支持；
　　b> css中的盒模型組成：content(內容) + padding(內邊距) + border(邊框) + margin(外邊距)；

background-size 背景尺寸

　　該成員決定背景圖的大小，可是，不會改變圖片自身原有的尺寸。

-webkit-background-size: widthSize heightSize ; 　　//（寬度尺寸 高度尺寸）
-moz-background-size: widthSize heightSize ; 
-ms-background-size: widthSize heightSize ;
-o-background-size: widthSize heightSize ;
background-size: widthSize heightSize ;

屬性的取值：

　　（1）默認取值：auto　

background-size: auto auto ; //背景圖會以自身大小呈現

　　（2）像素值：px ……

background-size: 50px 50px ; //背景圖會以指定值呈現

　　（3）百分比：100% ……

background-size: 50% 50% ; //背景圖會以相對於盒子尺寸的百分比大小呈現

　　（4）cover　　　　

background-size:cover ; //縮放背景圖到恰好覆蓋盒子爲止

　　（5）contain

background-size:contain ; //在保證顯示完整背景圖的狀況下，縮放背景圖到與盒子等寬或等高

最佳實踐：
　　圖片私有特性：只要設置圖片寬高中的任何一個值，圖片就會等比縮放，這樣能夠保證圖片不變形不失真；
　　所以，一般利用圖片這一特性，在不知道圖片等比例縮放尺寸的狀況下，background-size只給圖片寬高中的任何一個設置值，另一個設置爲auto。

background-clip 背景裁切

　　該成員規定背景（背景圖or背景色）的繪製區域。

-webkit-background-clip : clipArea ; 　　　　//clipArea指繪製區域
-moz-background-clip : clipArea ;
-ms-background-clip : clipArea ;
-o-background-clip : clipArea ;
background-clip : clipArea ;

clipArea的取值：
　　（1）border-box : 　 　背景從盒子邊框開始裁切 （默認）
　　（2）padding-box ：　　背景從盒子內邊距開始裁切
　　（3）content-box : 　　背景從盒子內容開始裁切　

(二)家族擴展功能

　　瞧瞧css3都給背景家族擴展了哪兩個功能！

　　　a> 多個背景圖
　　　b> 背景漸變

　　感受高大上的樣子，究竟是什麼神祕功能，趕忙來一塊兒分析分析！

多個背景圖

　　css3中可讓一個元素盒子應用一個或多個圖片做爲背景，並且多個背景之間用逗號"，"隔開，並且圖片按照書寫順序顯示！

background:url(./images/01.png),url(./images/02.png),url(./images/03.png);

特別說明：

　　a> 從IE9開始支持；
　　b> 不須要加上瀏覽器私有前綴；
　　c> 若是content-box、padding-box和border-box一同設置，須要把content-box寫在最前面，padding-box寫在第二，border-box寫在最後；

background:url(./images/01.png) content-box , url(./images/02.png) padding-box , url(./images/03.png) border-box;

　　注：在這裏content-box、padding-box和border-box，既是background-clip的屬性值，也是background-origin的屬性值；

背景漸變

　　css3中可讓一個元素盒子設置背景色漸變，而不是單純的只能設置純色做爲盒子的背景色或者指定圖片做爲盒子的背景！切記這裏的背景漸變是背景色！背景色！不是背景圖！！

（1）線性漸變　　

　　又稱爲直線漸變。

background-image:-webkit-linear-gradient(startLocal , color1 , color2 , color3);
background-image:-moz-linear-gradient(startLocal , color1 , color2 , color3);
background-image:-ms-linear-gradient(startLocal , color1 , color2 , color3);
background-image:-o-linear-gradient(startLocal , color1 , color2 , color3); 　//加上瀏覽器私有前綴的寫法
background-image:linear-gradient(startLocal , color1 , color2 , color3); 　　//W3C寫法

color1表示顏色值：

（1）若是後面沒有加上百分比或者像素值：
　　　　a> color1將在起始位置顯示；
　　　　b> color3將在最後位置顯示；
　　　　c> color2將在中間等分點顯示；
（2）若是後面加上百分比或者像素值，表示給顏色將在盒子的該位置顯示；　

startLocal表示起始位置，可取值：

　　（1）方位名詞：

top: 從上到下漸變(默認) 　　    (等價於to bottom)
left:從左到右漸變 　　　　　　  (等價於to right)
right:從右到左漸變 　　　　　　 (等價於to left)
bottom:從下到上漸變 　　　　　　(等價於to top)
top left:從左上角開始漸變 

　　（2）度數degree:
　　　　在背景漸變中，W3C和WHATWG的標準不同：數軸不同，起始位置不一樣，旋轉方向不一樣。所以，度數是不同的！具體：

　　　　　　a> W3C中，0deg是在X軸（水平方向）的左邊，順時針旋轉；
　　　　　　b> WHATWG中，0deg是在Y軸（垂直方向）的下方，逆時針旋轉；

　　　　　　

background-image:-webkit-linear-gradient(270deg, red, blue); background-image:-moz-linear-gradient(270deg, red, blue); background-image:-ms-linear-gradient(270deg, red, blue); background-image:-o-linear-gradient(270deg, red, blue); background-image:linear-gradient(180deg, red, blue); 　　　　/*deg 表示degree 度數*/

特別地，W3C不支持方位名詞的寫法，可是支持度數的寫法

（2）徑向漸變

　　又稱圓心漸變

background-image:-webkit-radial-gradient(start_X start_Y , color1 , color2 , color3);
background-image:-moz-radial-gradient(start_X start_Y , color1 , color2 , color3);
background-image:-ms-radial-gradient(start_X start_Y , color1 , color2 , color3);
background-image:-o-radial-gradient(start_X start_Y , color1 , color2 , color3); 　//加上瀏覽器私有前綴的寫法
background-image:radial-gradient(start_X start_Y , color1 , color2 , color3); 　　　//W3C寫法

說明：徑向漸變的起始位置的取值不支持度數的寫法！

背景(background)後遺症

（一）背景(background)綜合體

　　在css中，能夠用background複合屬性在一個聲明中設置全部的背景屬性（包括css3新增屬性），而不用單獨去寫某個背景屬性，能夠設置的背景屬性：

background-color 
background-position 
background-repeat 
background-attachment 
background-image
background-origin 
background-size 
background-clip 

　　是否是感受很牛逼，可是這裏幾個坑，值得咱們注意！

（1）一般所說的background複合屬性，是針對CSS2中5個背景屬性而言，不包含CSS3中新增3個背景屬性！

background: background-image background-repeat background-position background-attachment background-color ；

　　　　a> 不存在嚴格意義上的書寫順序（上面是老司機的書寫順序）；
　　　　b> 若是某個屬性沒有書寫，那麼將自動採用默認值；

　那麼background複合屬性，爲啥不包含CSS3中的3個屬性呢？理由有下：

a> css2中的背景屬性，已經獲得各大瀏覽器支持，不存在兼容性，不須要寫瀏覽器私有前綴！

b> css3中新增背景屬性，存在必定兼容性，且須要帶上各大瀏覽器的私有前綴才能獲得支持！

（2）還記得CSS3給背景家族新增長多個背景圖的功能麼，該功能也是以background開頭！

　　那麼問題來了!

　　若是在一個元素中咱們既要用background複合屬性來簡寫CSS2的背景屬性，又要添加多個背景圖，怎麼辦？

a> 優先用background複合屬性添加多個背景圖；

b> 背景屬性只能單獨寫，不能用background複合屬性來簡寫!

c> 單獨寫的背景屬性，必須寫在background複合屬性的後面！

　　確定又有同窗要問，爲何單獨背景屬性必須寫在background複合屬性以後?

css三大特性之層疊性!熟悉麼？長江後浪推前浪，前浪死在沙灘上！

（二）關於background-image屬性

　　這個家族成員比較牛逼，固然也比較複雜！

（1）能夠覆蓋多個背景圖的background複合屬性！

在同一個元素中：

　　將致使多個背景圖效果失效

div{ 　　width:300px; 　　height:300px; 　　background:url(images/30/ab.png) content-box,url(images/30/xiaoming.jpg) padding-box; 　　background-image:url(images/30/ab.png);
}

在嵌套的父子級元素中：

　　a> 若是子元素的背景圖尺寸小於父元素的尺寸，那麼父元素的多個背景圖效果的多餘部分會顯示出來！
　　b> 若是子元素的背景圖尺寸大於等於父元素的尺寸，那麼父元素的多個背景圖效果會被覆蓋！

div{ 　　width:300px; 　　height:300px; 　　background:url(images/30/ab.png) content-box,url(images/30/xiaoming.jpg) padding-box;
} div span{ 　　display: block; 　　width:300px; 　　height:300px; 　　background-image: url(images/02.jpg);
}

（2）背景漸變與背景圖共用background-image屬性！

　　a> 在同一元素中，二者不能共存，誰在前面，誰先死;
　　b> 在嵌套的父子級元素中，子元素的樣式只會覆蓋父元素的樣式;

（三）插入圖片與背景圖的區別

　　（1）插入圖片佔位；背景圖不佔位

　　（2）插入圖片語義高，能夠被搜索引擎收錄到；背景圖語義低，不能夠被搜索引擎搜錄到

　　（3）插入圖片不容易定位；背景圖容易定位，由於有background-position屬性

　　（4）插入圖片不能夠用精靈圖；背景圖能夠用精靈圖

　　（5）插入圖片有一個bug，下方帶縫隙

（四）最佳實踐

　　（1）在同一個元素中，background複合屬性寫在前面，單獨須要設置的背景屬性寫最後面；
　　　　　　理由：長江前浪推後浪，前浪死在沙灘上

　　（2）在同一元素中添加了多個背景圖，其餘背景屬性只能單獨寫，不能在用複合屬性簡寫；     

　　（3）在嵌套的父子級元素中，不建議寫同名屬性
　　　　　　理由：在子元素尺寸大於等於父元素尺寸的狀況下，父元素的樣式會被子元素覆蓋；

　　（4）在實際工做中，多用背景圖，少用插入圖片；

 

本文屬於本身在學習以後的總結分享，但願對你的學習能提供必定的幫助！如有錯誤之處，還請望多多指教，本人將在第一時間作出矯正！thank you ！！