backgroundsize.min.htc让ie支持background-size

CSS3 的background-size 可以定义背景图片的尺寸，但不支持ie6-ie8。本文介绍background-size polyf，它的原理是创建一个 img 插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。

分类：图片代码 > 背景图难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

CSS

body {
    background: url(test.jpg) center;
    background-size: cover;
    -ms-behavior: url(backgroundsize.htc);
    behavior: url(backgroundsize.htc);
}

cover属性

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

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

支持

<ul class='ul_demo'> <li>背景图像的正确位置和大小</li> <li>浏览器缩放时及时更新</li> <li>更新图片（替换等）时及时更新</li> </ul>

不支持

<ul class='ul_demo'> <li>多个背景（多重背景）</li> <li>4 个值的 background-position</li> <li>背景重复</li> <li>非默认值的 background-[clip/origin/attachment/scroll]</li> </ul>

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

点击下载 <a href='http://www.sucaihuo.com/jquery/demo/208/css/backgroundsize.htc'>backgroundsize.htc</a>