[CSS3] CSS3 RGBA做透明背景层

[复制链接]
rgba,我们把他拆开了rgb+a,RGB我想大家都熟悉,就是红色R+绿色G+蓝色B,a就是Alpha通道的简称,说得简单一点就是在RGB的基础上加进了一个通道Alpha
下面是rgba的语法:
R:红色值。正整数 | 百分数

G:绿色值。正整数 | 百分数

B:蓝色值。正整数| 百分数

A:透明度。取值0~1之间

在css2中,我们如果要做透明,马上就会想到用opacity,我们用一个实例来对比opacity和rgba
  1. <div class="example-opacity">
  2.   <p>Opacity效果</p>
  3.   <ul>
  4.    <li class="opacity opacity1">100%</li>
  5.    <li class="opacity opacity2">80%</li>
  6.    <li class="opacity opacity3">60%</li>
  7.    <li class="opacity opacity4">40%</li>
  8.    <li class="opacity opacity5">20%</li>
  9.    <li class="opacity opacity6">0</li>
  10.   </ul>
  11.   <p>CSS3的RGBA效果</p>
  12.   <ul>
  13.    <li class="rgba rgba1">1</li>
  14.    <li class="rgba rgba2">0.8</li>
  15.    <li class="rgba rgba3">0.6</li>
  16.    <li class="rgba rgba4">0.4</li>
  17.    <li class="rgba rgba5">0.2</li>
  18.    <li class="rgba rgba6">0</li>
  19. </ul>
  20. </div>
复制代码
我们分别给这两上ul中的li应用相关样式, 在li.opacity中我用使用CSS2中的opacity而在li.rgba中我们使用CSS3的rgba新属性
得到如下效果:

rgba1.png
效果中我们可以看出,他们相同之处就是背景色完全是一样的,但区别就是一直让大家觉得头痛的问题,那就是opacity后代元素会随着一起具有透明性,所以我们Opacity中的字随着透明值下降越来越看不清楚,而RGBA不具有这样的问题,但是其支持的浏览器中有一个占在大市场份额的IE不支持,这也就是让我们需要去做兼容,(听到兼容二字大家是不是特烦,我也是的)希望IE早点能实现著作权归作者所有。

所以我们在定义个背景为透明的层可以这样写
.beijing{background: rgba(0,0,0,0.45);},这样就是一个灰黑的透明背景层,0.45用来控制透明度参数,RGB的数值自己可以在PS颜色里可以查询到


回复

使用道具 举报

Copyright   ©2015-2016  大糖网  ( 浙ICP备17038000号-1 )

大糖网是站长们一起交流成长的平台,这里可以找到海量、优质精品的源码模板等建站资源