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. Linux 内核学习经验总结

    Linux 内核学习经验总结 学习内核,每个人都有自己的学习方法,仁者见仁智者见智.以下是我在学习过程中总结出来的东西,对自身来说,我认为比较有效率,拿出来跟大家交流一下. 内核学习,一偏之见:疏漏难 ...

  2. centos7下安装docker（16.docker跨主机存储）

    从业务数据的角度看,容器可以分为两类:无状态(stateless)容器和有状态(stateful)容器. 无状态:是指容器在运行的过程中不需要保存数据,每次访问的结果不依赖上一次的访问,比如提供静态页 ...

  3. Python：Day53 Template基础

    一.模板由 html代码+逻辑控制代码 组成 二.逻辑控制代码的组成 1.变量(使用双大括号来引用变量) 语法格式:{{ var_name }} -----------------------Temp ...

  4. 从零开始的ESP8266探索（1）-使用Server功能搭建Web Server

    https://blog.csdn.net/Naisu_kun/article/details/80398667 文件系统 https://blog.csdn.net/solar_Lan/articl ...

  5. AutoMapper快速上手

    一.什么是AutoMapper  AutoMapper是一个简单的对象映射框架(OOM),对象映射原理是把一种类型的输入对象转换为不同类型的输出对象,通俗讲就是通过一些约束讲一种类型中数据自动映射到另 ...

  6. 一道很有意思的java线程题

    这几天看结城浩的<java多线程设计模式>,跟着做一些习题,有几道题目很有意思,记录下自己的体会. 首先是题目(在原书212页,书尾有解答): public class Main { pu ...

  7. idea 上传代码到 gitee

    https://www.2cto.com/net/201804/740238.html 这一步如果是个空仓库可以提交,如果是个已有的项目 Define remote 一下就可以了,不要提交代码

  8. Maven项目pom.xml文件简单解析

    Maven项目pom.xml简单解析 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="h ...

  9. A2D Framework - 看如何精简业务逻辑 - 缓存子系统

    A2D中一项功能是关于Cache的,能够将判断.获取.删除cache的代码缩减到最少量,如下是Order业务逻辑的demo示范: interface IOrder { [Cachable()] str ...

  10. 强大的开源企业级数据监控利器Lepus安装与配置管理

    开篇介绍 官方网站:http://www.lepus.cc 开源企业级数据库监控系统 简洁.直观.强大的开源数据库监控系统,MySQL/Oracle/MongoDB/Redis一站式性能监控,让数据库 ...