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. lnmp下启动mysql报错 The server quit without updating PID file

    启动时候错误代码:Starting MySQL[FAIL.] The server quit without updating PID file (/var/run/mysqld/mysqld.pid ...

  2. 使用HttpURLConnection下载图片

    import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.net.Ht ...

  3. * {margin:0px; padding:0px;}什么意思？

    * {margin:0px; padding:0px;} *  表示所有的元素的对齐方式以及和父类之间的间距都为0 body{margin:0px;padding:0px;} body里面的则表示的是 ...

  4. MC的内存管理和删除机制

    先看一下,什么叫做内存的碎片化: 如果用c语言直接 malloc,free 来向操作系统申请和释放内存时, 在不断的申请和释放过程中,形成了一些很小的内存片断,无法再利用. 这种空闲,但无法利用内存的 ...

  5. GIS基本概念

    简介 WKT(Well-known text)是开放地理空间联盟OGC(Open GIS Consortium )制定的一种文本标记语言,用于表示矢量几何对象.空间参照系统及空间参照系统之间的转换. ...

  6. SpringBoot-Learning

    SpringBoot-Learning 本项目内容为Spring Boot教程程序样例. 作者博客:http://blog.didispace.com Spring Boot系列博文:http://b ...

  7. SQL Server 【附】创建"商品管理数据库"、"学生选课数据库"的SQL语句

    附:(创建“商品管理数据库”的SQL语句) --建立"商品管理数据库"数据库-- create database 商品管理数据库 on(name='商品管理数据库_m', file ...

  8. MSIL Emit AOP

    参考链接: https://pieterderycke.wordpress.com/tag/reflection-emit/ http://www.moon-soft.com/doc/23252.ht ...

  9. Java 利用HttpURLConnection发送http请求

    写了一个简单的 Http 请求的Class,实现了 get, post ,postfile package com.asus.uts.util; import org.json.JSONExcepti ...

  10. SQL Server 数据类型映射

    SQL Server 和 .NET Framework 基于不同的类型系统. 例如,.NET Framework Decimal 结构的最大小数位数为 28,而 SQL Server 的 decima ...