CSS3 background-size属性兼容

background-size是CSS3新增的属性，但是IE8以下还是不支持

background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；

background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

浏览器兼容：

IE 和遨游不支持；

Firefox 添加私有属性 -moz-background-size 支持；

Safari 和 Chrome 添加私有属性 -webkit-background-size 支持；

Opera 不支持 background-size 属性，添加其私有属性 -o-background-size 也不支持。

一、让IE7 IE8支持CSS3 background-size属性

　　由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。

使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>让IE7 IE8支持CSS3 background-size属性</title>
    <style>
        html {
            height: 100%;
        }
        body {
            height: 100%;
            margin: 0;
            background: url(http://cdn.dowebok.com/139/images/bg.jpg) center no-repeat;
            background-size: cover;
            -ms-behavior: url(css/backgroundsize.min.htc);
            behavior: url(css/backgroundsize.min.htc);
        }
    </style>
</head>

<body>

</body>
</html>

局限性

background-size polyfill 虽然可以模拟 background-size 属性，但并不能完全模拟，毕竟 background 方式和 img 方式还是有区别的，主要的支持情况如下：

支持

• 背景图像的正确位置和大小
• 浏览器缩放时及时更新
• 更新图片（替换等）时及时更新

不支持

• 多个背景（多重背景）
• 4 个值的 background-position
• 背景重复
• 非默认值的 background-[clip/origin/attachment/scroll]

由于 background-size polyfill 需要进过复杂的计算，所以可能会出现图片“一闪”的情况。并且 .htc 文件还不能跨域，使用 CDN 的需要注意。

虽然 background-size polyfill 有一定的局限性，但总比没有好，在某些情况下还是一个很好的选择。

二、让IE8支持CSS3 background-size属性

通过滤镜来实现这样的一个效果。

    width: 100%;
    min-height: 100%;
    background: url("../images/map.png") no-repeat;
    background-size: 100% 100%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='file:///E:/idea-project/html/nongkeyuan/assets/images/map.png',
            sizingMethod='scale'); 

注：路径要是绝对路径