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. Xena测试仪的自动化

    Xena,Xena Networks公司的网络测试仪,也能覆盖以太网L2~L7层测试仪,但功能较简单,界面也很简洁,用起来比较直观方便. 1.Xena的自动化测试场景 测试PC上的AT框架--> ...

  2. disconf系列【1】——百度disconf在ubuntu14.04环境下的安装

    disconf官网给出的安装文档默认读者已经非常熟练本文1.2章节给出的依赖软件的原理及使用方法,且官网默认安装环境为linux(windows安装方法只字未提).同时,官网对很多重要的细节语焉不详, ...

  3. 第一二九天上课 PHP 自制简单开发模板

    构建基础架构 在项目文件夹(自定义)下创建 (1)核心目录:WQ (2)模板目录:MoBan (3)编译目录:BianYi (4)创建配置文件: config.ini.php <?php //获 ...

  4. Java：多态（向上转型）

    先来看一段代码: class BaseClass{          public int book = 6;          public void base(){         System. ...

  5. Sublime Text 3 配置Java开发

    Sublime Text 3 配置Java开发 内嵌模式 在Sublime内部输出面板显示执行过程 配置JavaC - INSET.sublime-build 打开Sublime的包目录(选择菜单:P ...

  6. RHCA-红帽认证架构师

    OpenStack: 向部署应用 配置域.数据源子系统.中实施应用安全 迁移应用至 介绍集群 考试代码 任选其中五门: (红帽企业虚拟化) (红帽企业部署和系统管理) (红帽企业服务器硬化) (红帽企 ...

  7. jquery template模版引擎

    jTemplates http://jtemplates.tpython.com/ jquery-template  https://github.com/codepb/jquery-template ...

  8. iOS 当请求到的数据是double类型，会失去精准度，并且去掉小数点后的0

    首先请求到的数据都会变成字符串,先将字符串转化为double类型 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Menlo; color: ...

  9. libpng安装与配置(Win7+VS2010)

    一.下载 libpng:http://libmng.com/pub/png/libpng.html zlib:http://www.zlib.net/ IDE:VS2010 二.编译 将下载的两个zi ...

  10. python tm_isdst = -1, 0, 1 datetime module

    Python 里的tm_isdst DST 是daylight saving time, 意思是:夏令时 在python的time, datetime模块下,按照struct_time格式输出时间,最 ...