background-size: length|percentage|cover|contain;
ie9+、firefox 4+、opera、chrome 以及 safari 5+ 支援 background-size 屬性。
css3 新增的 background-size 是乙個很有用的屬性，用於定義背景的尺寸，有了這個屬性，你就可以任意指定背景的大小。其中最常用的值應該要數 cover 了，該值能讓背景縮放至填滿整個容器，即使是面積小於容器面積。話不多說直接上圖：
放乙個簡單的布局，讓child設定這張圖為背景圖，並給出background-size屬性：
看下ie 8下效果：
很明顯，background-size: cover 這個屬性並沒有生效。
有一種解決方式是利用ie 提供的css渲染來處理：alphaimageloader：在元素的背景和內容之間插入一張，並提供對此的剪下和改變尺寸的操作。如果載入的是png(portable network graphics)格式，則0%-100%的透明度也被提供。語法格式：filter : progid:dximagetransform.microsoft.alphaimageloader ( enabled=enabled , sizingmethod=size , src=url )
enabled：可選項，布林值(boolean)。設定或檢索濾鏡是否啟用。
1）true：預設值。濾鏡啟用。 2）false：濾鏡被禁止。
sizingmethod：可選項。字串(string)。設定或檢索濾鏡作用的物件的在物件容器邊界內的顯示方式。
1）crop：剪下以適應物件尺寸。
2）image：預設值。增大或減小物件的尺寸邊界以適應的尺寸。
3）scale：縮放以適應物件的尺寸邊界。
src：必選項。字串(string)。使用絕對或相對 url 位址指定背景影象。假如忽略此引數，濾鏡將不會作用。*
將之前的樣式修改一下：.child看下效果如何：
ok，貌似很不錯，但是，有個問題就是ie 9下，如果是帶透明的，會出現兩個堆疊的狀況，所以針對ie8 可以這麼寫，ie 8 +的話就要另尋他路了。
另外一種是老外發明的，老外寫了乙個 htc 檔案，名叫 background-size polyfill，使用該檔案能夠讓 ie7、ie8 支援 background-size 屬性。其原理是建立乙個 img 元素插入到容器中，並重新計算寬度、高度、left、top 等值，模擬 background-size 的效果。
修改一下child的樣式：
.child注意，[backgroundsize.min.htc]( 需要引進來，改好樣式來看下效果：
可以看到，已經填充了整個child，並且dom結構也變化了，這是.htc檔案自動建立的，ie 8+都相容。
有興趣深究的童鞋可以看下官方非壓縮的原始碼，原理是建立乙個 img 元素插入到容器中，並重新計算寬度、高度、left、top 等值，模擬 background-size 的效果。
IE8下實現相容rgba
昨天遇到乙個問題，要實現乙個背景透明的效果，用css3用rgba 就能實現，即 background rgba 0,0,0,5 但是要相容到ie8，就發現沒有透明效果，因為ie8不支援rgba 函式。下面我們總結一下rgba 函式的含義。rgba的含義，r代表red，g代表green，b代表blue...
IE8下實現相容rgba
background rgba 0,0,0,5 但是要相容到ie8，就發現沒有透明效果，因為ie8不支援rgba 函式。下面我們總結一下rgba 函式的含義。rgba的含義，r代表red，g代表green，b代表blue，a代表透明度。紅綠藍是三原色，所有顏色都可以由這三種顏色拼合而成。比如rgba...
IE8下實現相容rgba
昨天遇到乙個問題，要實現乙個背景透明的效果，用css3用rgba 就能實現，即 background rgba 0,0,0,5 但是要相容到ie8，就發現沒有透明效果，因為ie8不支援rgba 函式。下面我們總結一下rgba 函式的含義。rgba的含義，r代表red，g代表green，b代表blue...