CSS3 -- 背景尺寸（background-size）

一、background 描述

　　CSS2中，background屬性：

可合寫、可拆分寫
background: [<background-color>][,<background-image>][,<background-repeat>][,<background-attachment>][,<background-position>]

　　==》background-color：red(顏色名)、#FF0000(二進制)、rgb(255, 0, 0)、rgb(100%, 0%, 0%)、hsl(0, 100%, 50%) 。在CSS3中 還可用rgba(255,0,0,1)。

　　==》background-image： none || <url> 。

　　==》background-repeat：repeat || repeat-x || repeat-y || no-repeat。

　　==》background-attachment：scroll || fixed。

　　（background-attachment主要是用來設置背景圖像是否固定或者隨着頁面的其他部分滾動，，其默認值爲scroll，表示背景圖片會隨滾動條一塊兒滾動，而取值fixed時，背景圖片固定不動。）

　　==》background-position：<percentage> || <length> || [left|center|right][,top|center|bottom] 。

 

　　CSS3中，background 屬性 新增長了Background-size（背景尺寸）、Background-clip（背景裁剪）、Background-origin（背景原點）。

　　

二、background-size 語法、取值

background-size: auto || <length> || <percentage> || cover || contain

　　==》auto：默認值，保持背景圖片的原始高度和寬度；

　　==》cover：背景圖片放大，以適合鋪滿整個容器；（背景圖片失真）

　　　　 （場景）：當圖片小於容器時，又沒法使用background-repeat來實現時，就可採用cover。

　　==》contain：此值恰好與cover相反，背景圖片縮小，以適合鋪滿整個容器；（背景圖片失真）

　　　　（場景）：當背景圖片大於元素容器時，而又須要將背景圖片所有顯示出來。

　　==》<length>：設置具體的值，能夠改變背景圖片的大小。

　　==》<percentage>：百分值，但是0％〜100％之間任何值，此值只能應用在塊元素上，所設置百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算。

 

三、background-size 兼容

　　

更多兼容狀況：

 

四、background-size 用法

  /*Ｍozilla*/
   -moz-background-size: auto || <length> || <percentage> || cover || contain
   /*Webkit*/
   -webkit-background-size: auto || <length> || <percentage> || cover || contain
   /*Presto*/
   -o-background-size: auto || <length> || <percentage> || cover || contain
   /*W3c標準*/
   background-size: auto || <length> || <percentage> || cover || contain

在ＩＥ中有一個濾鏡是相似於cover的功能：（若是使用濾鏡的話，background-size:cover；只有在IE6中不支持了。）

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/background-image.jpg’, sizingMethod=’scale’);
-ms-filter: 「progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/background-image.jpg’, sizingMethod=’scale’)」;

 

整理自：（W3CPlus）CSS3 background-size