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

2020-03-24 19:23:30

字体：大中小

来源：转载

供稿：网友

这里我们学习CSS3 RGBA颜色类型，使用它不等于RGB与opacity相加。想想不使用CSS3，我们是如何满足“背景透明，文字（内容）不透明”这种需求的？例如现在有个需求：有个长300px，高100px的div在body为红色的页面中；该div拥有不透明度为50%的黑色背景颜色；该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: 内容也半透明了有经验的前端工程师知道，要达到需求所述的效果，上面的代码需要做些许变动：如果仅需满足IE，那么在原有的结构上加多一层，并将其设置为position:relative。效果如下： 2.兼容大部分浏览器的处理方式：这也需要加多一层，不过要与原结构“同级”。效果如下：以上2中方式，其中only ie的自然是不可取的，因为这是前端工程师的职责所在，我们必须使得大部分用户能得到相同的体验，而不仅仅是某个范围至于第二种，这是现在比较流行的处理方式。不过这种方式也不是那么完美，这个缺憾表现在：代码量增加：需加多额外一层无意义标签；与此同时，相应的CSS代码也将增加不灵活：由于新增的一层与内容层是并级的，所以新增层的宽高不能动态的随着内容层的中内容的增减而变化。这个时候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离你还远吗html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：一款利用html5和css3动画排列人物头像的实例演示

下一篇：CSS中清除浮动方法