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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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 方式还是有区别的，主要的支持情况如下：

支持

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

不支持

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

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

点击下载 backgroundsize.htc