解决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 报错: “此操作系统版本不支持此选项” .结果是 ...
随机推荐
- asp.net mvc 页面内容呈现Html.Raw HtmlString
asp.net mvc 页面内容呈现Html.Raw Html.Raw内容经过页面呈现,不呈现Html标签 @Html.Raw( File.ReadAllText(Server.MapPath(&qu ...
- SLF4J 简单日志门面 介绍和使用
参考:http://singleant.iteye.com/blog/934593 http://liuzidong.iteye.com/blog/776072 介绍: 简单日记门面(s ...
- 集合-LinkList
参考:http://www.cnblogs.com/skywang12345/p/3308807.html Consumer.class 消费者接口 参考:https://www.jianshu. ...
- python学习之-requests模块基础
安装版本:2.18 模块导入:import requests l 发送请求 发送GET请求: 获取GITHUB的公共时间线 r = requests.get(url='https://api.git ...
- Hihocoder 1561 观光旅行(启发式合并+贪心)
题目链接 Hihocoder 1561 首先对原图求$MST$ 我们发现某条边成为某两个点的关键路径的必要条件是这条边是最小生成树的树边. 所以我们求$MST$的同时进行启发式合并. 把$size$小 ...
- Educational Codeforces Round 36 (Rated for Div. 2) G. Coprime Arrays
求a_i 在 [1,k]范围内,gcd(a_1,a_2...,a_n) = 1的a的数组个数. F(x)表示gcd(a_1,a_2,...,a_n) = i的a的个数 f(x)表示gcd(a_1,a_ ...
- LeetCode:926. 将字符串翻转到单调递增
暴力法超时:思想:动态规划 public int minFlipsMonoIncrb(String S) { int result = S.length(); for (int i = 0; i &l ...
- OO第三单元作业小结
一.JML理论基础及应用工具链情况 理论基础 1.JML表达式 \result:表示方法执行后的返回值. \old(expr):表示一个表达式expr在相应方法执行前的取值. \foall:全称量词修 ...
- Oracle版本–EBS R12.1.1
select * from v$version; Oracle Database 11g Enterprise Edition Release 11.1.0.7.0 - 64bit Productio ...
- docker日志输出文件大小设置以及文件个数限制
问题描述: 今天有同事运行了一个docker容器,不多时就导致宿主机硬盘直接撑爆,消耗了120G,发生的很是突然. 问题排查: 后续查阅资料,发现是因为docker中的某个进程一直在持续输出,而这些输 ...