CSS3 RGBA颜色类型不等于RGB与opacity相加

---

这里我们学习CSS3 RGBA颜色类型，使用它不等于RGB与opacity相加 。

想想不使用CSS3，我们是如何满足“背景透明，文字（内容）不透明”这种需求的？

　　例如现在有个需求：

1. 有个长300px，高100px的div在body为红色的页面中；
2. 该div拥有不透明度为50%的黑色背景颜色；
3. 该div内容不允许出现半透明效果，且文字为白色。

　　根据该需求中的3点要求，我们需要得出的效果应如下图：

　　
　　Figure 1: 背景透明内容不透明

根据需求里的已知条件，我们代码如下：

body{
    background:#f00;
}
#opacity{
    width:400px;
    height:100px;
    background-color:#000;
    color:#fff;
    filter:alpha(opacity=50);     /* For IE */
    opacity:.5;
}

<div id="opacity">怎样实现背景透明，内容不透明？</div>

 　　运行这段代码后，效果与需求3不符合，内容也随着容器成了半透明的，看其效果如下图：

　　
　　Figure 2: 内容也半透明了

　　有经验的前端工程师知道，要达到需求所述的效果，上面的代码需要做些许变动：

1. 如果仅需满足IE，那么在原有的结构上加多一层，并将其设置为position:relative。效果如下：

  

2.兼容大部分浏览器的处理方式：这也需要加多一层，不过要与原结构“同级”。效果如下：

 

　　以上2中方式，其中only ie的自然是不可取的，因为这是前端工程师的职责所在，我们必须使得大部分用户能得到相同的体验，而不仅仅是某个范围

至于第二种，这是现在比较流行的处理方式。不过这种方式也不是那么完美，这个缺憾表现在：

1. 代码量增加：需加多额外一层无意义标签；与此同时，相应的CSS代码也将增加
2. 不灵活：由于新增的一层与内容层是并级的，所以新增层的宽高不能动态的随着内容层的中内容的增减而变化。

　　这个时候CSS3 RGBA的优势就体现出来了，从字面看，RGBA = RGB + alpha。但事实上RGBA并不是简单的RGB与alpha的相加。请看例子CSS3 RGBA color详解中几种颜色类型的对比。

 

　　我们知道opacity（IE下用filter:alpha(opacity=??)）是让整个元素渲染成半透明的效果，而不能单独指定是否只有颜色为半透明。我想这也许正是RGBA和HSLA这种类型颜色的出现原因。

　　RGBA的语法非常简单，如果你熟悉RGB颜色话。

　　rgba(0-255,0-255,0-255,0-1) 这就是RGBA的语法，前三个参数为色调，取值可在0-255之间，第四个参数则为alpha，取值为0-1之间。

以上面的需求第2点为例，用RGBA可以这样表示

background-color:rgba(0,0,0,.5);

　　这样就只有背景色为半透明，其它的俱不受影响。最大的问题被轻松搞定，那整个需求即变得异常简单起来，迟疑什么？立即看看用CSS3 RGBA实现的背景透明内容不透明效果吧。

 

而之前在第二种实现方案中所提及的2个缺憾，在RGBA的实现方案中，似乎根本不存在。

　　现在相信你也能体会到RGBA这种颜色类型的强大力量。CSS3离你还远吗

---

« 
» 

---