AppCanCSS背景圖片的屬性

標籤：

最近在用AppCan架構技術做跨平台行動裝置 App開發，碰到介面布局設計中圖片平鋪、展開效果。

我們用到的是CSS 3中Background-size屬性。

 

網上查了下這個屬性，小記下：

 

 取值： background-size: auto || length || percentage || cover || contain

 取值說明：

 1、auto：此值為預設值，保持背景圖片的原始高度和寬度；

 

 2、length：此值設定具體的值，可以改變背景圖片的大小；

 

 3、percentage：此值為百分值，可以是0％?100％之間任何值，但此值只能應用在塊元素上，所設定百分    值將使背景圖片大小根據所在元素的寬度的百分比來計算。

 

 4、cover：此值是將圖片放大，以適合鋪滿整個容器，這個主要運用在，當圖片小於容器時，又無法使用   background-repeat來實現時，我們就可以採用cover;將背景圖片放大到適合容器的大小，但   這種方法會使用背景圖片失真；

 

5、contain:此值剛好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個容器。

這個主要運用在，當背景圖片大於元素容器時，而又需要將背景圖片全部顯示出來，此時我們就可 以使用contain將 圖片縮小到適合容器大小為止，這種方法同樣會使用圖片失真。

 

當background-size取值可以設定兩個值，也可以設定一個值。

當只取一個值時，第二個值相當於auto，但這裡的auto並不會使背景圖片的高度保持自己原始高 度，而會與第一個值相同。

AppCanCSS背景圖片的屬性