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. [docker][win10]安装的坑

    右键这个小图标,先signin,注意这里是ID 不是邮箱   image.png 可能starting 时候就报错说 “Containers feature is not enabled” 或者   ...

  2. tape ——cf

    B. Tape time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  3. googLeNet网络

    1.什么是inception结构 2.什么是Hebbian原理 3.什么是多尺度处理 最近深度学习的发展,大多来源于新的想法,算法以及网络结构的改善,而不是依赖于硬件,新的数据集,更深的网络,并且深度 ...

  4. nginx配置文件服务器

    server{ listen  端口号; server_name   localhost; charset utf-8; root    放文件的路径; location   /xxx/yyy/ { ...

  5. vue快速入门

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  6. linux命令中的“<”和“|”是什么意思？

    ”<” 表示的是输入重定向的意思,就是把<后面跟的文件取代键盘作为新的输入设备.”| ”则表示一个管道的意思,可以理解为东西从管道的一边流向另外一边.   cat file.json | ...

  7. 图上最短路(Dijkstra, spfa)

    单源最短路径 题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出发点的编号. 接下来 ...

  8. 转://通过udev创建ASM共享磁盘（RAC）

    OS:RedHat EL6.0 Oracle:   Oracle 11gR2 在Oracle 11gR2,构建RAC时可以通过ASM创建asm disk,但是需要安装asmlib相关软件:对于RedH ...

  9. P2678 跳石头题解

    #include<cstdio> #include<iostream> #include<algorithm> #include<cstring> #i ...

  10. Luogu2860 [USACO06JAN]冗余路径Redundant Paths

    Luogu2860 [USACO06JAN]冗余路径Redundant Paths 给定一个连通无向图,求至少加多少条边才能使得原图变为边双连通分量 \(1\leq n\leq5000,\ n-1\l ...