根据caniuse（http://caniuse.com/#search=rgba），rgba兼容性为IE9以及以上浏览器。

实例代码：

 <!doctype html>

 <html lang="en">

     <head>

         <meta charset="UTF-8" />

         <title>rgba 兼容性处理</title>

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

             }

             .parent {

                 width: 400px;

                 height: 400px;

                 margin: 100px;

                 font-size: 20px;

                 color: #FF0000;

                 border: 1px solid red;

                 background-color: rgba(0, 0, 0, 0.5);

             }

         </style>

     </head>

     <body>

         <div class="parent">

             rgba

         </div>

     </body>

 </html>

chrome浏览器效果：

IE8浏览器效果（无背景）：

rgba兼容性处理：

 .parent {

                 width: 400px;

                 height: 400px;

                 margin: 100px;

                 font-size: 20px;

                 color: #FF0000;

                 border: 1px solid red;

                 background: rgba(0, 0, 0, 0.5);

                 /*下一句关键设置*/

                 filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000, endcolorstr=#7f000000);

             }

设置filter属性目的是上一行的透明度不起作用的时候执行，filter: progid:DXImageTransform.Microsoft.gradient是用来做渐变的，但是这个地方不需要渐变，所以两个颜色都设置成了相同的颜色。

这个颜色“#7f000000”是由两部分组成的。

第一部是#号后面的7f 。是rgba透明度0.5的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：

即：alpha*255得到的值再转换为16进制即可。

第二部分是7f后面的六位 是六进制的颜色值，跟rgb函数中的取值相同，比如rgb(255,255,255)对应#ffffff。

总结：至此完成IE8以及以下IE浏览器RGBA兼容性处理。

rgba兼容性处理的更多相关文章

  1. 【原】CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  2. CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  3. CSS实现背景透明，文字不透明(兼容所有浏览器)

    我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...

  4. Matplotlib数据可视化（7）：图片展示与保存

    In [1]: import os import matplotlib.image as mpimg from PIL import Image import matplotlib.pyplot as ...

  5. RGBA颜色与兼容性的半透明背景色

    所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是RED+GREEN+BLUE+ALPHA的颜色,小写一下就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Al ...

  6. CSS3：RGBA的使用方法

    1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...

  7. 从天猫和支付宝身上学习opcity与rgba

    不知道什么时候,一个双层透明的对话框悄然流行了起来. 我们在各大网站上都能见到类似这样的对话框: 这样的聚焦更明显,用户体验更好,也显得更加的高大上. 先说点题外话,这种布局如何用CSS+DIV去实现 ...

  8. 兼容性背景颜色半透明CSS代码（不影响内部子元素）

    如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...

  9. 一行代码解决ie6,7,8,9,10兼容性问题

    "浏览器模式"."文档模式"选项的区别如下: 1."浏览器模式"用于切换IE针对该网页的默认文档模式.对不同版本浏览器的条件备注解析.发送给 ...

随机推荐

  1. RabbitMQ小白菜学习之在window下的安装配置

    RabbitMQ安装 首先需要下载RabbitMQ的平台环境Erlang OTP平台和RabbitMQ Server(windows版): OTP 19.1 Windows 64-bit Binary ...

  2. Java动态代理深入解析

    要想了解Java动态代理,首先要了解什么叫做代理,熟悉设计模式的朋友一定知道在Gof总结的23种设计模式中,有一种叫做代理(Proxy)的对象结构型模式,动态代理中的代理,指的就是这种设计模式. 在我 ...

  3. 微信小程序教程（第四篇）

    小程序开发基本框架及其限制与优化 开发基本框架(MINA框架) └─ Project-folder/ ·································· 项目所在目录 ├─ page ...

  4. 一个案例深入Python中的__new__和__init__

    准备 在Python中,一切皆对象. 既然一切皆对象,那么类也是对象,我们暂且称之为 类对象.来个简单例子(本篇文章的所有案例都是运行在Python3.4中): class foo(): pass p ...

  5. 游戏UI框架设计(一) : 架构设计理论篇

    游戏UI框架设计(一) ---架构设计理论篇 前几天(2017年2月)看到一篇文章,国内王健林.马云等大咖们看好的未来十大最有"钱途"产业中,排名第一的就是"泛娱乐&qu ...

  6. Myeclipse 搭建Java Web 项目：Servlet 《二》

    上一节,我们使用myeclipse部署了web项目,但那部署的为静态的web项目,下面我们来学习编写动态的web项目,编写动态项目必须要用到的为:servlet. Servlet是由sun公司命名的, ...

  7. CLAHE的实现和研究

    CLAHE算法对于医学图像,特别是医学红外图像的增强效果非常明显. CLAHE  https://en.wikipedia.org/wiki/Adaptive_histogram_equalizati ...

  8. php中的实用分页类

    <table width="100%" border="1" cellpadding="0" cellspacing="0& ...

  9. 来自高维的对抗 - 逆向TinyTool自制

    一.序 无论是逆向分析还是漏洞利用,我所理解的攻防博弈无非是二者在既定的某一阶段,以高维的方式进行对抗,并不断地升级维度.比如,逆向工程人员一般会选择在Root的环境下对App进行调试分析,其是以ro ...

  10. Linux配置vnc

    yum install tigervnc-server vim /etc/sysconfig/vncservers 查看配置文件,修改最后面两行配置文件参数如下: VNCSERVERS="1 ...