[代码样式]让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 有一定的局限性,但总比没有好,在某些情况下还是一个很好的选择。

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]multiscroll.js制作斯柯达野帝页面

2020-9-10 17:14:56

脚本代码

[代码样式]scrollReveal.js – 页面滚动显示动画JS

2020-9-10 17:14:58

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索