如何让IE7支持CSS3 background-size属性

【导读】怎么样让IE7 IE8支持CSS3 background-size属性?前端做网页的时候遇到这样的情况,记录下来也给后来的网页设计师们避避坑。

如何让IE7 IE8支持CSS3 background-size属性?

 如何让IE7 IE8支持CSS3 background-size属性?

简介

CSS3 新增的 background-size 是一个很有用的属性,用于定义背景图片的尺寸,有了这个属性,你就可以任意指定背景图片的大小。其中最常用的值应该要数 cover 了,该值能让背景图片缩放至填满整个容器,即使是图片面积小于容器面积。

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

使用方法

直接在样式中写入即可,如:

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

支持

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

不支持

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

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

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


本文链接:http://mkapps.cn/news/design/381.html

无锡第二秀网络科技有限公司

  • 旗下 : 马氪软件
  • 主营业务 : 网站设计开发;微信公众号、小程序开发;APP开发;网络营销推广;广告设计 等
  • 联系人 : 徐经理
  • 手机 : 18706171959
  • 电话 : 0510-85873959
  • 邮箱 : b1990g228@qq.com
  • 网址 : http://mkapps.cn

如无特别说明©本站内容均为原创,转载请标注来源:无锡做网站公司http://mkapps.cn


系统已经关闭评论功能!

    匿名评论
  • 评论
人参与,条评论
 您阅读这篇文章共花了: 

分享这篇文章吧!

相关文章