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

请别先回答，我们接下来分析分析。

以前我们经常会碰到这样一个问题，设置了一个div的opacity(透明度)以后，这个div层里的内容也跟着透明了，特别是文字，一透明就离我 们想要的效果差很远了，显示这不是我们需要的。以前我遇风这种情况通常是把透明的div与原先放在他中间的内容分成两个平级的元素，然后通过定位来使内容 的元素盖中透明div的上面，一般的问题还是可以解决，不过也不问题，想想，如果我们的内容有多有少的话，那怎么办？js吧，呵呵，又是这么没效益的事来 了。

下面我们来看看在CSS3中遇见到这种情况的那些事儿

RGBA,RGB,opacity这三个属性前面都有讲过，这里我再重复一下，RGBA是定义一个颜色的红绿蓝值和这个颜色的透明度。RGB则只是定义了颜色的红绿蓝值，opacity是定义一个元素的透明度。发现重点了吗？

opacity是定义一个元素的透明度，对于一个网页来说，这里的元素及一个具体的“东西”,比如一个布局元素，一个图元素，页RGBA和RGB是定义的是这个元素的属性

我的理解是:定义元素跟定义元素属性这两个词跟元素本身的层次都不一样了。

我的理解可能不对，不过看看下面的实例，你就明白了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>CSS3 RGBA</title>   <style>   html,body,h1,h2,p,pre{margin:0;padding:0;} body{padding:0 20px;background:#090;color:#000;font:14px/1.6 Arial;} h1{font-size:26px;} h2{padding:10px 0;font-size:16px;} pre{padding:2px 0;} div{padding:0 20px;border:1px solid #fff;color:#fff;} .grammar{padding:0 20px;border:0 none;font-weight:bold;font-size:16px;}  #hex{  background-color:#000000; } #rgb{  background-color:rgb(0,0,0); } #rgb-alpha{  background-color:rgb(0,0,0);  opacity:.5; } #rgba{  background-color:rgba(0,0,0,.5); } .tips{padding:10px;color:#c00;} .notes{padding:2px 10px;background:#eee;} .navigation{padding:10px 0;} .copyright{padding:10px 0;font-style:italic;font-weight:bold;font-size:14px;} </style>  </head> <body>   <h1>CSS3 RGBA:</h1> <p class="notes">浏览器参照基准：Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE系列不做参考</p> <h2>语法：</h2> <div class="grammar"> rgba(0-255,0-255,0-255,0-1) </div> <h2>HEX颜色中的黑色：</h2> <div id="hex"> <pre><code>background-color:#000000;</code></pre> </div> <h2>RGB颜色中的黑色：</h2> <div id="rgb"> <pre><code>background-color:rgb(0,0,0);</code></pre> </div> <h2>RGB颜色+opacity透明度：</h2> <div id="rgb-alpha"> <pre><code>background-color:rgb(0,0,0); opacity:.5;</code></pre> </div> <h2>RGBA颜色：</h2> <div id="rgba"> <pre><code>background-color:rgba(0,0,0,.5);</code></pre> </div> </body> </html>

文章来自：http://www.webskys.com/css3/74.html

CSS3 RGBA等于RGB加上opacity吗?的更多相关文章

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

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

  2. 雪碧图（background-position）、overflow、title中的小图标、光标、rgb 和opacity 与rgba

    一.background-position     雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src   url    href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...

  3. CSS3 rgba

    复制粘贴: <!DOCTYPE html > <html > <head> <meta charset="utf-8"> <t ...

  4. CSS3 RGBA 属性高级用法

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

  5. CSS-3 RGBA的使用

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

  6. css——rgba（）和opacity的区别

    (学习笔记) 首先他们都能实现透明效果,不同的是作用对象. rgba()是css中设置背景颜色中的一个属性.而opacity是css的一个属性,也就是rgba()的作用对象是元素的背景颜色或元素的颜色 ...

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

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

  8. css3画半圆 ， 加上一点动画

    border-radius制作半圆与制作圆形的方法是一样的,只是元素的宽度与圆角方位要配合一致,不同的宽度和高度比例,以及圆角方位,可以制作上半圆.下半圆.左半圆和右半圆效果.例如: .semicir ...

  9. Mysql Sql语句令某字段值等于原值加上一个字符串

    MySQL连贯字符串不能利用加号(+),而利用concat. 比方在aa表的name字段前加字符'x',利用: update aa set name=concat('x',name); 替换: UPD ...

随机推荐

  1. 文件上传 和 base64编码

    base64编码 1.关于Base64编码  :  https://www.cnblogs.com/liyiwen/p/3814968.html (个人猜测),file表单发送文件,肯定是将文件转换为 ...

  2. git+可视化工具+github/码云

    git (实际上git和TortoiseGIT是一回事,只是TortoiseGIT把git命令行功能做了一个可视化处理,所以下面git和TortoiseGIT实现功能是一样的) 1.如何使用Git上传 ...

  3. （转）OpenFire源码学习之十：连接管理(上)

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43415827 关于连接管理分为上下两部分 连接管理 在大并发环境下,连接资源 需要随着用 ...

  4. hdu2089数位DP

    旁听途说这个名字很久了,了解了一下. 改题目的意思是给你若干区间,让你找寻区间内不含62或4的数. 首先暴力必然T...那么实际上就是说,想办法做一种预处理,在每次输入的时候取值运算就可以了. 既然是 ...

  5. 20、Linux命令对服务器磁盘进行监控

    服务器磁盘性能测试也是一个比较有意思的过程.首先我们要弄清楚磁盘储存哪些内容,这里推荐鸟哥的私房菜  我们不仅要推算出磁盘什么时候被占满,也要监控磁盘的读写速度.也就是我们常说的 I/O df -h ...

  6. idea中maven在install时出现一个问题

    Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4:test (default-test) on ...

  7. Swift结构体和类

    Swift结构体 在Swift标准中,绝大多数的公开的类型都是结构体,而枚举和类只占很小的一部分 比如Bool.Int.Double.String.Array.Dictionary等常见的类型都是结构 ...

  8. Linux/CentOS 7 timezone 修改

    1.su - 登录root用户 2.timedatectl set-timezone {timezone} (set后面加想要设置的时区) 举例:timedatectl set-timezone As ...

  9. libevent使用IOCP网络模型的示例

    这段时间抽空学习了一下强大的网络库libevent,其使用标准C语言编写,支持Windows.Linux.Mac等等主流操作系统,早期版本不支持Windows的IOCP,最新版本已经添加上了,在网上找 ...

  10. Centos6.5升级安装openssh7.7p1

    Centos6.5升级安装openssh7.7p1  关于OpenSSH漏洞   2016年1月14日OpenSSH发布官方公告称, OpenSSH Client 5.4~7.1 版本中未公开说明的功 ...