CSS3 RGBA等于RGB加上opacity吗?-CSS教程-爱易网页

CSS3 RGBA等于RGB加上opacity吗?

日期：2013-05-02　浏览次数：21280 次

在我们前端设计里有两篇教程： 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>

如今知道CSS3 RGBA等于RGB加上opacity吗?如果不明白，那我说一句吧:他们不相等！！

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

CSS3 RGBA等于RGB加上opacity吗?

相关资料更多>

推荐阅读更多>