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. 【BZOJ2002】弹飞绵羊(LCT)

    题意:给定一棵树,要求维护以下操作: 1.删除连接(x,y)的边 2.将(x,y)之间连边 3.询问某点子树大小 对于100%的数据n<=200000,m<=100000 思路:第一道有加 ...

  2. git使用快速入门

    git简介 git是一种版本控制器,更直白的说,团队开发的时候,管理代码使用的软件 git安装 Windows安装 到 https://www.git-for-windows.github.io/ 下 ...

  3. vue之条件渲染

    一.v-if v-if指令用于条件的渲染一块内容,当指令的表达式返回true时,内容才会被渲染. <h1 v-if="isshow">要显示么</h1> d ...

  4. 让win7任务条上的文件夹打开是c,d,e,f而不是库

    如果资源管理器是打开的,则右键点击资源管理器的图标,在跳出的菜单中,右键点击“Windows资源管理器”,选择“属性”. 在“快捷方式’选项卡,“目标”一栏,默认的是 %windir%\explore ...

  5. 游戏server主程白皮书-序言

    在从事游戏开发的6年时间里面.涉及的内容包含运营平台.GM工具.MMORPG.FPS游戏. 游戏都已经上线而且稳定执行.单server的承载量在1万-5万之间.对于这种成绩我自己还是比較惬意了.期间得 ...

  6. [Tools] Convert SVG to a PDF in Node with PDFKit and SVG.js

    Given a epxress application and an svg template, we want to draw some text, date onto it and convert ...

  7. HDU2897( 巴什博奕变形)

    邂逅明下 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...

  8. Android新手入门2016(7)--布局

    布局,这个在服务端变成是没有的,也是服务端的人学习client的一道坎吧. 曾经用cocos2d-x写小游戏的时候就是这个非常难懂,或者能用,可是理解不多的话,非常难写出好的布局,难以适合商业化的应用 ...

  9. Classification and logistic regression

    logistic 回归 1.问题: 在上面讨论回归问题时.讨论的结果都是连续类型.但假设要求做分类呢?即讨论结果为离散型的值. 2.解答: 假设: 当中: g(z)的图形例如以下: 由此可知:当hθ( ...

  10. vc常用类总结(转载)

    常用类 CRect:用来表示矩形的类,拥有四个成员变量:top left bottom right.分别表是左上角和右下角的坐标.可以通过以下的方法构造: CRect( int l, int t, i ...