复制粘贴：

<!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<style type="text/css">
textarea{display: block; width:500px;height:500px; margin:100px auto; }
ul{list-style: none;}
li.opacity {float: left; width: 50px; height: 50px; }
li.opacity1{background: rgb(255,255,0); opacity: 1 ; filter:alpha(opacity=100); }
li.opacity2{background: rgb(255,255,0); opacity: 0.8; filter:alpha(opacity=80); }
li.opacity3{background: rgb(255,255,0); opacity: 0.6; filter:alpha(opacity=60); }
li.opacity4{background: rgb(255,255,0); opacity: 0.4; filter:alpha(opacity=40); }
li.opacity5{background: rgb(255,255,0); opacity: 0.2; filter:alpha(opacity=20); }
li.opacity6{background: rgb(255,255,0); opacity: 0 ; filter:alpha(opacity=0); }

li.rgba {float: left; width: 50px; height: 50px; }
li.rgba1 {background: rgba(255,255,0,1); }
li.rgba2 {background: rgba(255,255,0,0.8); }
li.rgba3 {background: rgba(255,255,0,0.6); }
li.rgba4 {background: rgba(255,255,0,0.4); }
li.rgba5 {background: rgba(255,255,0,0.2); }
li.rgba6 {background: rgba(255,255,0,0); }

p {padding: 5px 10px; color: white; }
/*问题的传在*/
.bg-box {top: 200px; width: 200px; height: 100px; border: 1px solid #ccc; background: red; position: relative; }
.bg {background: black; opacity: 0.5; filter:alpha(opacity=50); width: 100%; height: 70px; position: absolute; bottom: 0; left: 0; }

/*问题的解决1：
在html中把bg这个div分离出来了，让他和bg-content这个div变成兄弟关系，然后通过CSS把他们都定位在同一位置，只是bg放在了bg-content的下面（z-index）控制，另外在bg的div上应用了透明
*/
.bg-box2 {top: 200px; width: 200px; height: 100px; border: 1px solid #ccc; background: red; position: relative; }
.bg2 {background: black; opacity: 0.5; filter:alpha(opacity=50); width: 100%; height: 50px; position: absolute; bottom: 0; left: 0; z-index: 1; }
.bg-content2 {width: 100%; height: 70px; position: absolute; bottom: 0; left: 0; z-index: 10; }

/*问题的解决2：
只要在bg-content中应用一个background:rgba();就能有上面那种效果了
*/
.bg-box3 {top: 200px; width: 200px; height: 100px; border: 1px solid #ccc; background: red; position: relative; }
.bg-content3 {width: 100%; height: 70px; position: absolute; bottom: 0; left: 0; background: rgb(0,0,0); background: rgba(0, 0, 0,0.5);
/*下面是ie兼容*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
}

</style><script type="text/javascript">
</script>
</head> <body>
<div class="example-opacity">
<p>Opacity效果</p>
<ul>
<li class="opacity opacity1">100%</li>
<li class="opacity opacity2">80%</li>
<li class="opacity opacity3">60%</li>
<li class="opacity opacity4">40%</li>
<li class="opacity opacity5">20%</li>
<li class="opacity opacity6">0</li>
</ul>
<p>CSS3的RGBA效果</p>
<ul>
<li class="rgba rgba1">1</li>
<li class="rgba rgba2">0.8</li>
<li class="rgba rgba3">0.6</li>
<li class="rgba rgba4">0.4</li>
<li class="rgba rgba5">0.2</li>
<li class="rgba rgba6">0</li>
</ul>
</div>

<div class="bg-box">
<div class="bg">
<div class="bg-content">
<p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p>
</div>
</div>
</div>

<div class="bg-box2">
<div class="bg2"></div>
<div class="bg-content2">
<p>我解决了前景有透明!</p>
</div>
</div>

<div class="bg-box3">
<div class="bg-content3">
<p>我是用rgba()解决了前景有透明</p>
</div>
</div>

<textarea style="">
效果中我们可以看出，他们相同之处就是背景色完全是一样的，但区别就是一直让大家觉得头痛的问题，那就是opacity后代元素会随着一起具有透明性，所以我们Opacity中的字随着透明值下降越来越看不清楚，而RGBA不具有这样的问题，但是其支持的浏览器中有一个占在大市场份额的IE不支持，这也就是让我们需要去做兼容，（听到兼容二字大家是不是特烦，我也是的）希望IE早点能实现。
那为什么不使用opacity而要使用rgba呢????
在RGBA还没有出世前，我们都是使用opacity来做透明，但这里存在一个问题，就是我们在父元素中使用了opacity，那么其垢代元素都会受其影响，我想这个问题大家都有碰到过，为了解决这样的问题我们需要增加一个空的div来专门放置使用透明的背景，然后通过使用绝对定位来实现我们需要的结果。为了更好的理解我们在这里来看一个使用opacity的实例

综合上面的所述，我们规纳一个RGBA在实际应用中的模式
.rgba {
background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/
background: rgba(0, 0, 0,0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */
}

</textarea>
</body>
</html>

CSS3 rgba的更多相关文章

  1. CSS3 RGBA等于RGB加上opacity吗?

    在我们前端设计里有两篇教程: CSS3 RGBA colors使用说明 css3中opacity属性学习与实践,他们公别介绍了RGBA,RGB,opacity的用法,这里我们把这三个属性放在一起来考虑 ...

  2. 制作透明色：《CSS3 RGBA》与Opacity样式用法

    前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是 ...

  3. CSS3 RGBA 属性高级用法

    这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...

  4. CSS-3 RGBA的使用

    由于IE-8及以下都不支持 RGBA(),所以往往大家都不用这个属性,而是用图层叠加的方式去实现我们想要的效果.因为 opacity 这个属性是会影响到子孙元素的. 例如: <div class ...

  5. css3 RGBA 红色R+绿色G+蓝色B+Alpha通道

    语法: R:红色值.正整数 | 百分数 G:绿色值.正整数 | 百分数 B:蓝色值.正整数| 百分数 A:透明度.取值0~1之间 取值: <length>:Hue(色调).0(或360)表 ...

  6. CSS3制作动画的三个属性

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...

  7. 用Less CSS定义常用的CSS3效果函数

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

  8. 熟悉css/css3颜色属性

    颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...

  9. 使用 CSS3 打造一组质感细腻丝滑的按钮

    CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果. 温馨提示:为保证最佳的效 ...

随机推荐

  1. 为什么说Babel将推动JavaScript的发展

    Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码.Babel由来自澳大利亚的开发者Sebastian McKenzie创建.他的目标是使Babel可以处理ES6的所有新语法,并为 ...

  2. Sublime搭建Python开发环境

    print ('hello world!') 1. 下载python,并设置path系统环境变量:当在命令行中输入python,出现如下界面,显示安装成功. 2. 安装最新的sublime,使用注册机 ...

  3. 关于JAVA堆栈的简单说明

    关于堆栈的说明: 1.栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 2. 堆栈的优劣势 栈: 优势:存取 ...

  4. Verilog学习笔记简单功能实现（八）...............同步FIFO

    Part 1,功能定义: 用16*8 RAM实现一个同步先进先出(FIFO)队列设计.由写使能端控制该数据流的写入FIFO,并由读使能控制FIFO中数据的读出.写入和读出的操作(高电平有效)由时钟的上 ...

  5. linux下安装redis的详细过程

    先安装一些组件: yum -y install gcc gcc-c++ libstdc++-devel 下载并安装: # wget http://download.redis.io/releases/ ...

  6. Guava学习笔记：EventBus

    EventBus是Guava的事件处理机制,是设计模式中的观察者模式(生产/消费者编程模型)的优雅实现.对于事件监听和发布订阅模式,EventBus是一个非常优雅和简单解决方案,我们不用创建复杂的类和 ...

  7. 性能测试学习之二 ——性能测试模型（PV计算模型）

    PV计算模型 现有的PV计算公式是: 每台服务器每秒平均PV量 =( (总PV*80%)/(24*60*60*40%))/服务器数量 =2*(总PV)/* (24*60*60) /服务器数量 通过定积 ...

  8. Servlet获取request的变量方法.

    1.String   localAddr = request.getLocalAddr();   // 获取本地IP,即服务器 IP 2.setAttribute(String name,Object ...

  9. IO流(三)__字节流 标准输入输出流 转换流

    一.字节流:FileInputStream 和FileOutputStream 基本操作和字符流类相同,没有flush,但是close还是要的 复制一个字节流文件 private static voi ...

  10. PDF.NET 开发框架之 SOD框架 Ver 5.2 正式版开源源码发布

    PDF.NET 开发框架之 SOD框架 Ver 5.2.1.0307 正式版发布,包含以下部分: SOD_Pwmis.Core --包括下列数据提供程序 SqlServer SqlServerCe A ...