background:#00ff00 url(img.jpg) no-repeat;   
-moz-background-size:60% 80%;    
-webkit-background-size:60% 80%;     
-o-background-size:60% 80%;} 
background-size:60% 80%;     

background-image: url('file:///F:/test/images/flashbg.jpg'); 
background-size: 
cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg',sizingMethod='scale'); 

滿心歡喜地寫(xiě)代碼，最后測(cè)試兼容性的時(shí)候發(fā)現(xiàn)Logo圖片在IE8下特別大。明顯是background-size在ie8一下不兼容。

　　我懂得，IE8還是個(gè)孩子，我就加幾句你獨(dú)有的代碼讓你兼容吧，司空見(jiàn)慣了：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/logo.png',  sizingMethod='scale');

　　然后發(fā)現(xiàn)logo變得十分華麗（奧義·雙重logo）：

　　明顯是ie8兩種background屬性設(shè)置都同時(shí)支持，把一個(gè)圖片加載了兩次。以前沒(méi)有發(fā)現(xiàn)，是因?yàn)橐郧暗膱D片并不透明，兼容語(yǔ)句引入的圖片完美覆蓋原來(lái)的圖片，所以沒(méi)有發(fā)現(xiàn)問(wèn)題?，F(xiàn)在的logo圖片背景圖片是透明的，所以疊一起了。

　　因此我們引用另外一種方法，引入火腿腸文件（.htc）來(lái)進(jìn)行hack，強(qiáng)行讓ie8支持background-size屬性。簡(jiǎn)單來(lái)說(shuō)，就是引入js文件來(lái)對(duì)圖片大小進(jìn)行配置。

　　使用的htc文件的background-size-polyfill項(xiàng)目git地址：https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.htc

　　然后在css文件里面引用語(yǔ)句，注意url是相對(duì)于引用css文件的html的路徑：

        /*IE8 圖片透明不可用filter*/
        -ms-behavior: url(../htc/backgroundsize.min.htc);
        behavior:url(../htc/backgroundsize.min.htc);

　　破費(fèi)解決！小僵尸你學(xué)到了嗎！

由于 background-size 是 CSS3 新增的屬性，所以 IE 低版本自然就不支持了，但是老外寫(xiě)了一個(gè) htc 文件，名叫 background-size polyfill，使用該文件能夠讓 IE7、IE8 支持 background-size 屬性。其原理是創(chuàng)建一個(gè) img 元素插入到容器中，并重新計(jì)算寬度、高度、left、top 等值，模擬 background-size 的效果。

使用方法

直接在樣式中寫(xiě)入即可，如：

body {
    height: 100%;
    margin: 0;
    background: url(images/126.jpg) center no-repeat;
    background-size: cover;
    -ms-behavior: url(backgroundsize.min.htc);
    behavior: url(backgroundsize.min.htc);
}

局限性

background-size polyfill 雖然可以模擬 background-size 屬性，但并不能完全模擬，畢竟 background 方式和 img 方式還是有區(qū)別的，主要的支持情況如下：

支持

• 背景圖像的正確位置和大小
• 瀏覽器縮放時(shí)及時(shí)更新
• 更新圖片（替換等）時(shí)及時(shí)更新

不支持

• 多個(gè)背景（多重背景）
• 4 個(gè)值的 background-position
• 背景重復(fù)
• 非默認(rèn)值的 background-[clip/origin/attachment/scroll]

由于 background-size polyfill 需要進(jìn)過(guò)復(fù)雜的計(jì)算，所以可能會(huì)出現(xiàn)圖片“一閃”的情況。并且 .htc 文件還不能跨域，使用 CDN 的需要注意。

雖然 background-size polyfill 有一定的局限性，但總比沒(méi)有好，在某些情況下還是一個(gè)很好的選擇。