解决IE浏览器部分版本不支持background-size属性问题
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属性问题的更多相关文章
- IE浏览器部分版本不支持opacity透明度属性问题
半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: pro ...
- CSS样式如何解决IE浏览器不同版本的兼容问题
如果你想让浏览器是固定的IE6版本,那么你做网页的时候在<head>后面加上一句话: <meta http-equiv="X-UA-Compatible" con ...
- IE浏览器部分版本不支持background-siza属性问题
background-size是CSS3新增的属性,但是IE8以下还是不支持,可以通过滤镜来实现这样的一个效果 background-size:contain; // 缩小图片来适应元素的尺寸(保持像 ...
- IE浏览器部分版本不支持background-size属性问题
background-size是CSS3新增的属性,但是IE8以下还是不支持,可以通过滤镜来实现这样的一个效果 background-size:contain; // 缩小图片来适应元素的尺寸(保持像 ...
- IE 浏览器各个版本 JavaScript 支持情况一览表
语言元素 语言元素 突发.IE6 标准.IE7 标准 IE8 标准 IE 9 标准 IE 10 标准 边缘 Windows 应用商店应用程序 __proto__ 属性 (Object) (JavaSc ...
- 使用PIE.htc让万恶的IE内核浏览器IE6\7\8支持CSS3部分属性
万恶的IE内核浏览器,这是多少前端程序员头疼的事情... 今天给大家介绍一下如何用 PIE.htc 来让IE浏览器支持CSS3的 border-radius.box-shadow.CSS3 Backg ...
- 解决老浏览器不支持ES6的方法
转载地址:http://www.rockyxia.com/?p=669 为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使 ...
- Win10-IIS注册asp 此操作系统版本不支持此选项 错误解决方法
现象再现: 今日在Win10上面ASP.NET网站突然不能跑了, 过程再现: 根据资料提示重新注册ASPNET_IIS.exe -i 直接提示: C:\WINDOWS\system32>c:\w ...
- 在windows 10 上使用aspnet_regiis.exe -i 命令报 “此操作系统版本不支持此选项” 的解决办法
用CMD窗口在C:\Windows\Microsoft.NET\Framework64\v4.0.30319下使用命令aspnet_regiis -i 报错: “此操作系统版本不支持此选项” .结果是 ...
随机推荐
- 【BZOJ2002】弹飞绵羊(LCT)
题意:给定一棵树,要求维护以下操作: 1.删除连接(x,y)的边 2.将(x,y)之间连边 3.询问某点子树大小 对于100%的数据n<=200000,m<=100000 思路:第一道有加 ...
- git使用快速入门
git简介 git是一种版本控制器,更直白的说,团队开发的时候,管理代码使用的软件 git安装 Windows安装 到 https://www.git-for-windows.github.io/ 下 ...
- vue之条件渲染
一.v-if v-if指令用于条件的渲染一块内容,当指令的表达式返回true时,内容才会被渲染. <h1 v-if="isshow">要显示么</h1> d ...
- 让win7任务条上的文件夹打开是c,d,e,f而不是库
如果资源管理器是打开的,则右键点击资源管理器的图标,在跳出的菜单中,右键点击“Windows资源管理器”,选择“属性”. 在“快捷方式’选项卡,“目标”一栏,默认的是 %windir%\explore ...
- 游戏server主程白皮书-序言
在从事游戏开发的6年时间里面.涉及的内容包含运营平台.GM工具.MMORPG.FPS游戏. 游戏都已经上线而且稳定执行.单server的承载量在1万-5万之间.对于这种成绩我自己还是比較惬意了.期间得 ...
- [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 ...
- HDU2897( 巴什博奕变形)
邂逅明下 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submissi ...
- Android新手入门2016(7)--布局
布局,这个在服务端变成是没有的,也是服务端的人学习client的一道坎吧. 曾经用cocos2d-x写小游戏的时候就是这个非常难懂,或者能用,可是理解不多的话,非常难写出好的布局,难以适合商业化的应用 ...
- Classification and logistic regression
logistic 回归 1.问题: 在上面讨论回归问题时.讨论的结果都是连续类型.但假设要求做分类呢?即讨论结果为离散型的值. 2.解答: 假设: 当中: g(z)的图形例如以下: 由此可知:当hθ( ...
- vc常用类总结(转载)
常用类 CRect:用来表示矩形的类,拥有四个成员变量:top left bottom right.分别表是左上角和右下角的坐标.可以通过以下的方法构造: CRect( int l, int t, i ...