HTML5网页设计

html_css

Background背景色透明RGBA

时间:2013-03-16 00:44来自: 信有UED作者:JUN点击:
RGB不用说,大家都知道是什么,但RGBA是什么呢? 1 2 background : rgb ( 0 , 0 , 0 ) ; background : rgba ( 0 , 0 , 0 , 0.5 ) ; 我们会发现RGBA里面新添加了一个值,但这个值又是什么呢?

RGB不用说,大家都知道是什么,但RGBA是什么呢?

  1. background: rgb(0,0,0); 
  2. background: rgba(0, 0, 0,0.5); 

我们会发现RGBA里面新添加了一个值,但这个值又是什么呢?最后这个值就是在RGB的基础上加进了一个通道Alpha。

浏览器的兼容性:

如果庞统说rgba是制作透明色(透明背景色、透明边框色、透明前景色等),大家不由会想起opacity 这个东西。现在我们先来看一个rgba和opacity的对比实例:

HTML代码

  1. <div class="test"> 
  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> 

CSS代码:

  1. li.opacity { float:leftwidth:50pxheight:50px;}  
  2. li.opacity1background:rgb(255,255,0); opacity:1; filter:alpha(opaity=100);}  
  3. li.opacity2background:rgb(255,255,0); opacity:0.8; filter:alpha(opaity=80);}  
  4. li.opacity3background:rgb(255,255,0); opacity:0.6; filter:alpha(opaity=60);}  
  5. li.opacity4background:rgb(255,255,0); opacity:0.4; filter:alpha(opaity=40);}  
  6. li.opacity5background:rgb(255,255,0); opacity:0.2; filter:alpha(opaity=20);}  
  7. li.opacity6background:rgb(255,255,0); opacity:0; filter:alpha(opaity=0);} 
  8.  
  9. li.rgba { float:leftwidth:50pxheight:50px; }  
  10. li.rgba1background:rgba(255,255,0,1);}  
  11. li.rgba2background:rgba(255,255,0,0.8);}  
  12. li.rgba3background:rgba(255,255,0,0.6);}  
  13. li.rgba4background:rgba(255,255,0,0.4);}  
  14. li.rgba5background:rgba(255,255,0,0.2);}  
  15. li.rgba6background:rgba(255,255,0,0);} 

效果:

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

综合上面的所述,规纳出一个RGBA在实际应用中的模式

  1. .rgba { 
  2.     backgroundrgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/  
  3.     background: rgba(000,0.5);  
  4.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"/*Filter for IE8 */   
  5.     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */  

或者

  1. .bg{  
  2.     background:rgba(0000.65)!important
  3.     filter:alpha(opacity=70);  
  4.     background:#000

这里需要注意的是startColorStr和endColorStr的值#80000000,其中前两位是十六进制的透明度80,也就是透明值为0.5而后面六位是十六进制的颜色#000000(black黑色)。
rgba不单可以应用在background上,我们还可以应用在只要设置了颜色的地方都可以使用,我在这里简单的说一下几种:

第一种:前景色color
HTML代码

  1. <p class="norgba-color">用rgba改变我的字体颜色</p> 
  2. <p class="rgba-color">用rgba改变我的字体颜色</p> 

CSS代码

  1. .norgba-color{ color:rgb(25500);}   
  2. .rgba-color { color:rgba(25500,0.5);} 

效果:

第二种:边框色border-color

HTML代码

  1. <p class="norgba-border-color">用rgba改变我的边框颜色</p> 
  2. <p class="rgba-border-color">用rgba改变我的边框颜色</p> 

CSS代码

  1. .norgba-border-color{ border:5px solid rgb(255,0,0); width200px; }   
  2. .rgba-border-color { border:5px solid rgba(255,0,0,0.5); width200px; } 

效果:

第三种:字体的阴影色text-shadow

HTML代码

  1. <p class="norgba-text-shadow">用rgba改变我的字体阴影颜色</p> 
  2. <p class="rgba-text-shadow">用rgba改变我的字体阴影颜色</p> 

CSS代码

  1. .norgba-text-shadow { text-shadow:0 2px 1px rgb(255,0,0);}   
  2. .rgba-text-shadow { text-shadow:0 2px 1px rgba(255,0,0,0.3);} 

效果:

第四种:改变边框阴影色

HTML代码

  1. class="norgba-box-shadow">用rgba改变我的边框阴影颜色</p>  
  2. <p class="rgba-box-shadow">用rgba改变我的边框阴影颜色</p> 

CSS代码

  1. .norgba-box-shadow{ 
  2.     border:5px solid green;  
  3.     width:200px;  
  4.     -webkit-box-shadow:0 2px 2px rgb(255,0,0);  
  5.     -moz-box-shadow:0 2px 2px rgb(255,0,0);  
  6.     box-shadow:0 2px 2px rgb(255,0,0);  
  7. .rgba-box-shadow {  
  8.     border:5px solid green;  
  9.     width:200px;  
  10.     -webkit-box-shadow:0 2px 2px rgba(255,0,0,0.6);  
  11.     -moz-box-shadow:0 2px 2px rgba(255,0,0,0.6);  
  12.     box-shadow:0 2px 2px rgba(255,0,0,0.6);  

效果:

通过上面浏览器兼容列表会发现不是所有的浏览器都支持RGBA,所以我们在用的时候也要考虑到这个情况。

当前文章地址:http://www.shejicool.com/web/html_css/417.html

相关文章
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐