1.rgba也经常在实际应用中使用，它主要是在原来rgb的基础上添加了一透明度。但是他又和opacity又有一些差别，主要体现在对子元素的透明度的影响上。

　　例如：使用opacity和background属性设置元素的背景色和透明度，其子元素的透明度跟着父元素一起变化。

 <!DOCTYPE html>

 <html>

 <head>

     <title>css3</title>

 </head>

 <style type="text/css">

     .example{

         width:100%;

         height:500px;

         background: yellow;

         opacity: 0.1;

         color:red;

         font-size: 50px;

     }

     .example2{

         background: blue;

         width: 200px;

         height:300px;

     }

     .example3{

         background: blue;

     }

 </style>

 <body>

 <div class="example">

     <div class="example2">

         111

     </div>

 </div>

 <div class="example3">

     background

 </div>

 </body>

 </html>

但是rgba（）对子元素的透明度没有影响

 <!DOCTYPE html>

 <html>

 <head>

     <title>css3</title>

 </head>

 <style type="text/css">

     .example{

         width:100%;

         height:500px;

         background: rgba(0,0,0,.1);

         color:red;

         font-size: 50px;

     }

     .example2{

         background: yellow;

         width: 200px;

         height:300px;

     }

 </style>

 <body>

 <div class="example">

     <div class="example2">

         111

     </div>

 </div>

 </body>

 </html>

参考：http://www.w3cplus.com/content/css3-rgba

css3新特性@rgba的更多相关文章

  1. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  2. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  3. CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  4. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  5. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  6. css3新特性学习系列 -- border

    css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius  圆角 支持:IE9+ 用法: border-rad ...

  7. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  8. 深入了解css3新特性

    深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

  9. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

随机推荐

  1. 基于Python的函数回归算法验证

    看机器学习看到了回归函数,看了一半看不下去了,看到能用方差进行函数回归,又手痒痒了,自己推公式写代码验证: 常见的最小二乘法是一阶函数回归回归方法就是寻找方差的最小值y = kx + bxi, yiy ...

  2. C# 软件绑定QQ群类开源放出

    周天闲来无事写个公共类,可以添加到你们自己项目中限制必须加入你QQ群才可以使用. 代码简单,高手勿喷,有哪里不合理的请回帖让大家学习学习. using System; using System.Tex ...

  3. "System Protection" is disabled in Win10 default settings

    We could find some important clue in Restore Point because "System Protection" of volume C ...

  4. NoSQL学习——MongoDB

    MongoDB作为一款文档数据库,支持分片存储,scale-out,集群自动切换,下面将粗略的配置步骤总结如下: 几个重要概念: 数据库:集合--记录--游标(查询时标记序号) sharding分片: ...

  5. canvas知识点

    看到网上某些特别好看的效果,就突然想看看这个canvas; canvas是html5中的一个标签.所以兼容的是Internet Explorer 9.Firefox.Opera.Chrome 和 Sa ...

  6. python-etcd

    Client 对象 ['_MDELETE', '_MGET', '_MPOST', '_MPUT', '__class__', '__contains__', '__del__', '__delatt ...

  7. REST及RESTful的实现

    什么是REST? REST (REpresentation State Transfer) 描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy Fielding ...

  8. 滴滴与Uber的竞争分析

    滴滴与Uber的竞争分析 随着互联网时代的到来,智能手机的普及,互联网不再是一个完全虚拟的东西,它开始慢慢地融入到我们的生活中来.这些年我们可以明显地感受到我们的生活方式在一天天发生着变化,我们也逐渐 ...

  9. Winform DataGridView控件添加行号

      有很多种方法,这里介绍三种: A: 控件的RowStateChanged事件中添加,RowStateChanged事件是在行的状态更改(例如,失去或获得输入焦点)时发生的事件: e.Row.Hea ...

  10. Matlab melband的计算

    %% mel bankmelnum = 24;low = 0;high = 0.5;melbank=melbankm(melnum,fftsize,Fs,low,high,'m');%归一化mel滤波 ...