background-size: length|percentage|cover|contain;
IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。
CSS3 新增的 background-size 是一個(gè)很有用的屬性，用于定義背景圖片的尺寸，有了這個(gè)屬性，你就可以任意指定背景圖片的大小。其中最常用的值應(yīng)該要數(shù) cover 了，該值能讓背景圖片縮放至填滿(mǎn)整個(gè)容器，即使是圖片面積小于容器面積。
由于 background-size 是 CSS3 新增的屬性，所以 IE 低版本自然就不支持了。
話不多說(shuō)直接上圖：
原圖是一張330 * 250大小的圖片如下：
放一個(gè)簡(jiǎn)單的布局，讓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 這個(gè)屬性并沒(méi)有生效。
有一種解決方式是利用IE 提供的CSS渲染來(lái)處理：
AlphaImageLoader：在元素的背景和內(nèi)容之間插入一張圖片，并提供對(duì)此圖片的剪切和改變尺寸的操作。如果載入的是PNG(Portable Network Graphics)格式，則0%-100%的透明度也被提供。
語(yǔ)法格式：filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=Enabled , sizingMethod=Size , src=URL )
enabled：可選項(xiàng)，布爾值(Boolean)。設(shè)置或檢索濾鏡是否激活。
1）true：默認(rèn)值。濾鏡激活。 2）false：濾鏡被禁止。
sizingMethod：可選項(xiàng)。字符串(String)。設(shè)置或檢索濾鏡作用的對(duì)象的圖片在對(duì)象容器邊界內(nèi)的顯示方式。
1）crop：剪切圖片以適應(yīng)對(duì)象尺寸。
2）image：默認(rèn)值。增大或減小對(duì)象的尺寸邊界以適應(yīng)圖片的尺寸。
3）scale：縮放圖片以適應(yīng)對(duì)象的尺寸邊界。
src：必選項(xiàng)。字符串(String)。使用絕對(duì)或相對(duì) url 地址指定背景圖像。假如忽略此參數(shù)，濾鏡將不會(huì)作用。*
將之前的樣式修改一下：
.child {
width: 200px;
height: 150px;
border: 1px solid red;
background: url(./images/item-img.png) no-repeat;
background-size: cover;
/* 此處加上-ms前綴，讓IE識(shí)別 */
-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以下識(shí)別，不包括IE 9 */
background: none\9;
}
看下效果如何：
OK，貌似很不錯(cuò)，但是，有個(gè)問(wèn)題就是IE 9下，如果圖片是帶透明的，會(huì)出現(xiàn)兩個(gè)圖片堆疊的狀況，所以針對(duì)IE8 可以這么寫(xiě)，IE 8 +的話就要另尋他路了。
另外一種是老外發(fā)明的，老外寫(xiě)了一個(gè) htc 文件，名叫 background-size polyfill，使用該文件能夠讓 IE7、IE8 支持 background-size 屬性。其原理是創(chuàng)建一個(gè) img 元素插入到容器中，并重新計(jì)算寬度、高度、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ìn)來(lái)，改好樣式來(lái)看下效果：
可以看到，圖片已經(jīng)填充了整個(gè)child，并且dom結(jié)構(gòu)也變化了，這是.htc文件自動(dòng)創(chuàng)建的，IE 8+都兼容。
有興趣深究的童鞋可以看下官方非壓縮的源碼，原理是創(chuàng)建一個(gè) img 元素插入到容器中，并重新計(jì)算寬度、高度、left、top 等值，模擬 background-size 的效果。
OK，到此IE8下兼容background-size方法分享完畢。