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. tls/ssl证书生成和格式转换

    生成密钥:openssl genrsa -out my.key 2048 生成csr申请文件:openssl req -sha256 -new -key my.key -out my.csr 生成自签 ...

  2. jenkins：通过execute shell启动的进程会被杀死的问题

    [问题]在jenkins中配置自动更新部署项目时,如果采取用execute shell启动/关闭tomcat,会发现可以进行关闭tomcat,但是无法启动tomcat,虽然构建会显示执行成功,但是查看 ...

  3. ZYNQ fsbl阶段的调试方法

    以下是从安富利工程师的技术支持的邮件中摘抄的,在此再次对他们表示感谢. 在我们面对客户单板的时候,fsbl阶段的调试多少会有些问题,在这个过程中怎么快速定位客户的问题,并将有效的信息反馈给希望能帮助到 ...

  4. Python自动化 【第十六篇】：JavaScript作用域和Dom收尾

    本节内容: javascript作用域 DOM收尾 JavaScript作用域 JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走 ...

  5. Visual Studio 15 Preview 4安装

    今天看到了有Visual Studio 15 Preview 4的安装文件放出,便想去安装体验一下C# 7.0的新语法.谁知安装时遇到一个错误: 手动下载这个补丁安装后,还是提示这个错误.本来以为是还 ...

  6. FireDac 的RecordCount 相关测试 记录。

    unit Unit4; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  7. MC的分布式算法的实现和一些总结

    首先我们知道Memcached是一个分布式的缓存系统,但memcached并不像是mongodb那样,允许配置多个节点,且节点之间是自动分配数据的 也就是说memcached节点之间,是互不相通信的, ...

  8. Support Vector Machine (2) : Sequential Minimal Optimization

    目录 Support Vector Machine (1) : 简单SVM原理 Support Vector Machine (2) : Sequential Minimal Optimization ...

  9. 为eclipse添加tomcat插件（eclipse tomcat plugin）

    打开站点:http://marketplace.eclipse.org/content/eclipse-tomcat-plugin 把Install拖到打开的eclipse的工作区中,即可下载安装. ...

  10. Math类中的BigDecimal

    如果我们编译运行下面这个程序会看到什么? public class Test {    public static void main(String args[]) {                 ...