background-size是CSS3新增的属性,现在有很多浏览器都支持CSS3了。但是IE浏览器有些版本还是不支持,比如IE8,IE9也有些CSS3的属性会支持,但是有些也不支持。在这里就了解一下CSS3的background-size。

background-size 属性

1、定义:
background-size 用来调整背景图像的尺寸大小。以象素或百分比显示,当指定为百分比时,大小会由所在区域的宽度、高度以及 background-origin 的位置决定,还可以通过 cover 和 contain 来对图片进行伸缩。

2、语法:
background-size : contain | cover | 100px 100px | 50% 100%;

3、参数:
    background-size:contain; // 缩小图片来适应元素的尺寸(保持像素的长宽比);
    background-size :cover; // 扩展图片来填满元素(保持像素的长宽比);
    background-size :100px 100px; // 调整图片到指定大小;
    background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元素的尺寸。

4、浏览器兼容:
    IE 和遨游不支持;
    Firefox 添加私有属性 -moz-background-size 支持;
    Safari 和 Chrome 添加私有属性 -webkit-background-size 支持;
    Opera 不支持 background-size 属性,添加其私有属性 -o-background-size 也不支持。

5、示例:

div{
background:#00ff00 url(img.jpg) no-repeat;
background-size:60% 80%;
-moz-background-size:60% 80%;
-webkit-background-size:60% 80%;
-o-background-size:60% 80%;
}
       在IE不支持这个属性的时候可以通过滤镜来实现这样的一个效果。

代码如下:
<strong>background-image: url('file:///F:/test/images/flashbg.jpg');
background-size: cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='file:///F:/test/images/flashbg.jpg', sizingMethod='scale');</strong>

这样就可以让IE也实现background-size:100%100%的效果了,注意这两个路径要一样,并且是绝对路径。

解决IE浏览器部分版本不支持background-size属性问题的更多相关文章

  1. IE浏览器部分版本不支持opacity透明度属性问题

    半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: pro ...

  2. CSS样式如何解决IE浏览器不同版本的兼容问题

    如果你想让浏览器是固定的IE6版本,那么你做网页的时候在<head>后面加上一句话: <meta http-equiv="X-UA-Compatible" con ...

  3. IE浏览器部分版本不支持background-siza属性问题

    background-size是CSS3新增的属性,但是IE8以下还是不支持,可以通过滤镜来实现这样的一个效果 background-size:contain; // 缩小图片来适应元素的尺寸(保持像 ...

  4. IE浏览器部分版本不支持background-size属性问题

    background-size是CSS3新增的属性,但是IE8以下还是不支持,可以通过滤镜来实现这样的一个效果 background-size:contain; // 缩小图片来适应元素的尺寸(保持像 ...

  5. IE 浏览器各个版本 JavaScript 支持情况一览表

    语言元素 语言元素 突发.IE6 标准.IE7 标准 IE8 标准 IE 9 标准 IE 10 标准 边缘 Windows 应用商店应用程序 __proto__ 属性 (Object) (JavaSc ...

  6. 使用PIE.htc让万恶的IE内核浏览器IE6\7\8支持CSS3部分属性

    万恶的IE内核浏览器,这是多少前端程序员头疼的事情... 今天给大家介绍一下如何用 PIE.htc 来让IE浏览器支持CSS3的 border-radius.box-shadow.CSS3 Backg ...

  7. 解决老浏览器不支持ES6的方法

    转载地址:http://www.rockyxia.com/?p=669 为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使 ...

  8. Win10-IIS注册asp 此操作系统版本不支持此选项 错误解决方法

    现象再现: 今日在Win10上面ASP.NET网站突然不能跑了, 过程再现: 根据资料提示重新注册ASPNET_IIS.exe -i 直接提示: C:\WINDOWS\system32>c:\w ...

  9. 在windows 10 上使用aspnet_regiis.exe -i 命令报 “此操作系统版本不支持此选项” 的解决办法

    用CMD窗口在C:\Windows\Microsoft.NET\Framework64\v4.0.30319下使用命令aspnet_regiis -i 报错: “此操作系统版本不支持此选项” .结果是 ...

随机推荐

  1. HDU4768:Flyer [ 二分的奇妙应用 好题 ]

    传送门 Flyer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  2. msp430项目编程51

    msp430综合项目---扩展项目一51 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结

  3. .Net Core下使用RabbitMQ比较完备的两种方案(虽然代码有点惨淡,不过我会完善)

    一.前言     上篇说给大家来写C#和Java的方案,最近工作也比较忙,迟到了一些,我先给大家补上C#的方案,另外如果没看我上篇博客的人最好看一下,否则你可能看的云里雾里的,这里我就不进行具体的方案 ...

  4. JQuery select 编程时选中原有的值

    js 此为核心代码 $(document).ready(function(){ $("#carTypeId").attr("value",'${carInfo. ...

  5. ssh 卡主

    偶尔会遇到这样的现象 ssh 登录一台远程机器,显示下面的信息然后hang在那 Connecting to 192.168.137.102:22... Connection established. ...

  6. iinflux数据库使用

    特殊用法: http://blog.fatedier.com/2016/07/05/research-of-time-series-database-influxdb/ 创建表及表中的key和valu ...

  7. win7系统使用engine进行开发报错,“未能加载文件或程序集”

    http://www.gisall.com/wordpress/?p=7161 使用vs2010加 arcengine 开发winfrom应用,新建了uc,拖了几个控件后,编译,报未能加载文件或程序集 ...

  8. 【effective c++】定制new和delete

    条款49: 了解new-handler的行为 operator new 和 operator delete只适合用来分配单一对象.array所用的内存由operator new[]分配出来,并由ope ...

  9. win7下 安装 source code pro

    转: http://my.oschina.net/yearnfar/blog/325107 source code pro 字体安装, 一. 去 https://github.com/adobe-fo ...

  10. C语言里字符串的解析

      根据给定的字符串,按照一定规则解析字符串,卡住好几次,这次做个笔记,以供参考 函数名称:   strtok 函数原型:   char *strtok(char *s1, const char *s ...