background-size: length|percentage|cover|contain;
IE9+咐蚯、Firefox 4+、Opera详幽、Chrome 以及 Safari 5+ 支持 background-size 屬性。
CSS3 新增的 background-size 是一個很有用的屬性，用于定義背景圖片的尺寸牍汹，有了這個屬性，你就可以任意指定背景圖片的大小柬泽。其中最常用的值應(yīng)該要數(shù) cover 了慎菲，該值能讓背景圖片縮放至填滿整個容器，即使是圖片面積小于容器面積锨并。
由于 background-size 是 CSS3 新增的屬性露该，所以 IE 低版本自然就不支持了。
話不多說直接上圖：
原圖是一張330 * 250大小的圖片如下：
放一個簡單的布局第煮，讓child設(shè)置這張圖為背景圖解幼，并給出background-size屬性：
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="UTF-8">
<title>IE 8 下兼容background-size</title>
<style>
.parent {
width: 400px;
height: 320px;
border: 1px solid #000;
}
.child {
width: 200px;
height: 150px;
border: 1px solid red;
background: url(./images/item-img.png) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
看下IE 8下效果：
很明顯抑党，background-size: cover 這個屬性并沒有生效。
有一種解決方式是利用IE 提供的CSS渲染來處理：
AlphaImageLoader：在元素的背景和內(nèi)容之間插入一張圖片撵摆，并提供對此圖片的剪切和改變尺寸的操作底靠。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供特铝。
語法格式：filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=Enabled , sizingMethod=Size , src=URL )
enabled：可選項暑中，布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活鲫剿。
1）true：默認值鳄逾。濾鏡激活。 2）false：濾鏡被禁止牵素。
sizingMethod：可選項严衬。字符串(String)。設(shè)置或檢索濾鏡作用的對象的圖片在對象容器邊界內(nèi)的顯示方式笆呆。
1）crop：剪切圖片以適應(yīng)對象尺寸请琳。
2）image：默認值。增大或減小對象的尺寸邊界以適應(yīng)圖片的尺寸赠幕。
3）scale：縮放圖片以適應(yīng)對象的尺寸邊界俄精。
src：必選項。字符串(String)榕堰。使用絕對或相對 url 地址指定背景圖像竖慧。假如忽略此參數(shù)，濾鏡將不會作用逆屡。*
將之前的樣式修改一下：
.child {
width: 200px;
height: 150px;
border: 1px solid red;
background: url(./images/item-img.png) no-repeat;
background-size: cover;
/* 此處加上-ms前綴圾旨，讓IE識別 */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/item-img.png',sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/item-img.png',sizingMethod='scale');
/* \9 是 IE的CSS hack,IE9以下識別，不包括IE 9 */
background: none\9;
}
看下效果如何：
OK魏蔗，貌似很不錯砍的，但是，有個問題就是IE 9下莺治，如果圖片是帶透明的廓鞠，會出現(xiàn)兩個圖片堆疊的狀況，所以針對IE8 可以這么寫谣旁，IE 8 +的話就要另尋他路了床佳。
另外一種是老外發(fā)明的，老外寫了一個 htc 文件榄审，名叫 background-size polyfill砌们，使用該文件能夠讓 IE7、IE8 支持 background-size 屬性。其原理是創(chuàng)建一個 img 元素插入到容器中怨绣，并重新計算寬度角溃、高度拷获、left篮撑、top 等值，模擬 background-size 的效果匆瓜。
修改一下child的樣式：
.child {
width: 200px;
height: 150px;
border: 1px solid red;
background: url(./images/item-img.png) no-repeat;
background-size: cover;
/* 再次引入backgroundsize.min.htc赢笨，filter的那段刪除 */
-ms-behavior: url(./backgroundsize.min.htc);
behavior: url(./backgroundsize.min.htc);
}
注意，[backgroundsize.min.htc](https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.htc) 需要引進來驮吱，改好樣式來看下效果：
可以看到茧妒，圖片已經(jīng)填充了整個child，并且dom結(jié)構(gòu)也變化了左冬，這是.htc文件自動創(chuàng)建的桐筏，IE 8+都兼容。
有興趣深究的童鞋可以看下官方非壓縮的源碼拇砰，原理是創(chuàng)建一個 img 元素插入到容器中梅忌，并重新計算寬度、高度除破、left牧氮、top 等值，模擬 background-size 的效果瑰枫。
OK踱葛，到此IE8下兼容background-size方法分享完畢。