X

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

时间:2021-07-17 13:22来源:无锡做网站公司

摘要:怎么样让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 有一定的局限性,但总比没有好,在某些情况下还是一个很好的选择。


声明:除非注明,本站内容由无锡网站建设马氪软件原创发布©,转载请联系我们授权合作。

感谢您耐心阅读,祝好!
 您阅读这条内容,共花了: 

给这篇内容写个评语吧!

热门资讯
产品推荐

关于我们

了解我们,合作即是服务的开始


★你们主营业务有哪些? 

专注于企业网站建设、seo优化排名、网络营销、品牌形象设计、交互设计、画册设计、LOGO设计,OA系统开发、移动APP设计及开发等。我们了解大中小型企业的生意模式和需求,我们倡导让客户感知产品的应用体验价值,而不仅是产品的功能

★你们公司怎么样? 

马氪软件是徐伟轩创立的互联网产品与技术服务相结合的无锡软件公司。我们以帮企业获得更大成功为使命,为企业网络推广、品牌营销,助企业腾飞一臂之力!我们不喜欢“抄近路”、“套模板” 尽量建议客户采用原创设计!

★为了节省您的时间,您有任何需要,随时联系我们。注册账号,纵横全站

联系电话:0510-85873959

首页 > 新闻资讯 > 网站前端设计
如何让IE7支持CSS3 background-size属性
怎么样让IE7 IE8支持CSS3 background-size属性?前端做网页的时候遇到这样的情况,记录下来也给后来的网页设计师们避避坑。
发布时间:2021-07-17
© 第二秀网络科技有限公司
长按识别二维码查看详细内容