background-size是CSS3新增的属性，但是IE8以下还是不支持

background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；

background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

浏览器兼容：

IE 和遨游不支持；

Firefox 添加私有属性 -moz-background-size 支持；

Safari 和 Chrome 添加私有属性 -webkit-background-size 支持；

Opera 不支持 background-size 属性，添加其私有属性 -o-background-size 也不支持。

一、让IE7 IE8支持CSS3 background-size属性

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

使用方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>让IE7 IE8支持CSS3 background-size属性</title>

    <style>

        html {

            height: 100%;

        }

        body {

            height: 100%;

            margin: 0;

            background: url(http://cdn.dowebok.com/139/images/bg.jpg) center no-repeat;

            background-size: cover;

            -ms-behavior: url(css/backgroundsize.min.htc);

            behavior: url(css/backgroundsize.min.htc);

        }

    </style>

</head>

<body>

</body>

</html>

局限性

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

支持

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

不支持

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

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

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

二、让IE8支持CSS3 background-size属性

通过滤镜来实现这样的一个效果。

    width: 100%;

    min-height: 100%;

    background: url("../images/map.png") no-repeat;

    background-size: 100% 100%;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(

            src='file:///E:/idea-project/html/nongkeyuan/assets/images/map.png',

            sizingMethod='scale');

注：路径要是绝对路径

CSS3 background-size属性兼容的更多相关文章

  1. CSS3 background属性

    background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...

  2. css3 background

    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...

  3. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

  4. JS控制CSS3，添加浏览器兼容前缀

    不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); ...

  5. CSS3 ： transition 属性

    CSS3的 transition 属性用于状态过度效果! 1.语法: transition: property duration timing-function delay; -moz-transit ...

  6. CSS3浏览器私有属性

    CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分.因此每种内核的浏览器都只能识别带有自身私有前缀的CSS3属性.我们在书写CSS3代 ...

  7. background复合属性详解（上）：background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  8. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  9. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

随机推荐

  1. P1145 约瑟夫 W（模拟）

    暴力+模拟 #include<iostream> #include<cstring> using namespace std; int ans, k, k2; ]; bool ...

  2. docker 2 docker介绍

    docker是基于go语言实现的云开源项目 docker的主要目标是‘build ,ship and run any app,anywhere’,也就是说通过对应用程序组件的封装,分发,部署,运行等生 ...

  3. Red Hat 7.2 RPM安装Mysql 5.7.12

    安装Red Hat  7.2  开发包Java包全部安装 下载Mysql  5.7.12 wget  http://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5 ...

  4. Apollo内核版本安装

    参考:https://github.com/ApolloAuto/apollo/blob/master/docs/quickstart/apollo_software_installation_gui ...

  5. Linux并发与同步专题 (3) 信号量

    关键词:Semaphore.down()/up(). <Linux并发与同步专题 (1)原子操作和内存屏障> <Linux并发与同步专题 (2)spinlock> <Li ...

  6. day95

    Linux基本部署配置及常见扩展应用 Linux软件包安装方法 1. 安装: 整个安装过程可以分为以下几步: 1) 取得应用软件:通过下载.购买光盘的方法获得: 2)解压缩文件:一般tar包,都会再做 ...

  7. jquery append()与html()注意项

    项目中,涉及到有一部分js代码是从数据库中读取出来动态加载到一个<script>标签中的情况.使用到了jquery的append()和html()两个函数. 应用场景如下: 页面端,有一个 ...

  8. Web组件流畅拖动效果

    拖动效果,可以形象的帮助用户处理一些问题,比如Windows删除文件,只需将文件拖动至回收站即可.比起右键显得更形象,我觉得更好玩一点^_^.当然,在其他许多方面,其实也有用到拖动效果,只是他们不是那 ...

  9. Jenkins-配置LDAP认证

    Jenkins-配置LDAP认证 参考文档: LDAP添加用户详见我的博文  Linux分类 中的< LDAP2-创建OU和用户>博文. 1.LDAP配置 1.准备一个adminDN账号用 ...

  10. WPF效果（GIS三维篇）

    二维的GIS已经被我玩烂了,紧接着就是三维了,哈哈!先来看看最简单的效果: