IE8下兼容rgba颜色的半透明背景
在工作中做一个图片半透明遮罩时发现在IE8下不兼容
一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了。
先说说rgba的含义:
r代表red,g代表green,b代表blue,a代表透明度。红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0,.5)就是透明度为0.5的黑色。现代浏览器是支持rgba的,但是在IE8等古董级浏览器中是不支持rgba的,IE8只能勉强支持rgb()函数(即去掉了透明度,只能表示颜色)。
网上的解决方法是:
background: rgba(0,0,0,.5); /*支持rgba的浏览器*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); /*IE8支持*/
第二句话的意思就是当上一行的透明度不起作用的时候执行。这句话的意思本来是用来做渐变的,但是这个地方不需要渐变。所以两个颜色都设置成了相同的颜色。
解释下#7f000000,第一部分是#号后面的7f。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下:

第二部分是19后面的六位。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(0,0,0,)对应#000;都是黑色。
到这里,rgba的用法就可以兼容IE8了。
但是经过实践发现这种方法只能用在背景色上,前景色或其他则无能为力了
IE8下兼容rgba颜色的半透明背景的更多相关文章
- 真~让IE8支持background: rbga; ,IE8下兼容rgba颜色的半透明背景
IE8下兼容rgba颜色的半透明背景 这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的. 这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug. 它们 ...
- ie8不兼容rgba的解决
借鉴................. 在调试ie8兼容性的问题时,发现ie8不支持rgba. 关于rgba(),即为颜色设置的方法函数,rgb代表颜色,a代表透明度. 如rgba(0,0,0,0.1 ...
- Jquery ajax传递xml方式在ie8下兼容问题
主要问题就是ie8把xml格式在打开的时候转换成了string,我们只用把其转换回xml就可以了. $.ajax({ type:’GET’, url:’list.php?pagenow=’+count ...
- input输入框的border-radius属性在IE8下的完美兼容
在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛.不错方法确实是这样,但是不要忘了border-radi ...
- a标签的背景图在ie8下不显示的问题
突然发现临下班时候问题就多, 马上下班了被头头告知线上已经上线很久的活动现在有个兼容性问题, a标签的背景图在ie8下会有不显示的情况. 我自己找了台ie8的机器实验了一下, 发现一切正常, 但是在另 ...
- DIV+CSS IE6/IE7/IE8/FF兼容问题汇总
1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...
- IE8下实现兼容rgba
昨天遇到一个问题,要实现一个背景透明的效果,用CSS3用rgba()就能实现,即 background: rgba(0,0,0,.5); 但是要兼容到IE8,就发现没有透明效果,因为IE8不支持rgb ...
- 兼容ie的半透明背景颜色过滤器,会影响事件的触发.
兼容ie的半透明背景颜色过滤器,会影响事件的触发.
- 兼容IE、Firefox的背景半透明内容不透明设置
首先要说明的是背景是内容的祖先元素.如果是兄弟节点那就没有必要记录这篇文章了. 记录一下,知其然也知其所以然. IE8-特点: 1.不支持"opcity:0.5;"这种写法,只支持 ...
随机推荐
- SIMATIC IT HISTORIAN在烟用二醋酸纤维素生产中应用
原文转载自:http://www.soft6.com/tech/5/54287.html 本文介绍了西门子MES核心产品SIMATIC IT HISTORIAN实时数据库及客户端工具在流程生产中的具体 ...
- 图表控件MsChart使用demo
chart 控件主要有 Titles 标题集合 Chart Area图形显示区域 Series图表集合 Legends图列的集合 (1) 常用事件: 1. Series1.Points.DataB ...
- Mongodb的索引--学习笔记(未完)
全文索引 建立方法: --在articles集合的key字段上创建全文索引 db.articles.ensureIndex({key:"text"}) --在articles集合的 ...
- Oracle 11g 之自动收集统计信息
在Oracle的11g版本中提供了统计数据自动收集的功能.在部署安装11g Oracle软件过程中,其中有一个步骤便是提示是否启动这个功能(默认是启用这个功能). 1.查看自动收集统计信息的任务及状态 ...
- 解决在sublime text3在ubuntu下无法输入中文的问题
方法链接:https://github.com/lyfeyaj/sublime-text-imfix 效果图:
- 20.python的文件处理
我们日常在处理文件的时候一般都遵循这样的逻辑:打开文件,操作文件,保存关闭文件. 但在python中,又分为以下几步:创建文件对象,对文件对象进行操作(读入,写入之类的),关闭文件. 由于文件操作在p ...
- NLP自然语言处理学习笔记三(集成开发环境)
前言: 我们在做自然语言学习的过程中使用Python进行编程.是用解析器的方式确实有些麻烦.在这里给大家推荐一款集成开发环境IDE可以很方便的对Python进行项目管理,代码自动提示,运行调试等. 简 ...
- 菜鸟学习Struts——国际化
一.概念 国际化:界面上的语言可以根据用户所在的地区改变显示语言. 如图: 二.实例 下面就一步一步的教大家利用Struts实现国际化. 1.编写资源文件 这个资源文件就是界面上显示的字符,资源文件里 ...
- Linux软链接与硬链接
1.Linux链接概念Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接]硬连接指通过索引节点 ...
- hdu 5210 Delete
原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=5210 简单题如下: #include<algorithm> #include<ios ...