html5设置透明度argb,Background背景色透明RGBA和opacity的对比实例（转载）

最新推荐文章于 2023-12-15 16:23:47 发布

DRcthink

最新推荐文章于 2023-12-15 16:23:47 发布

阅读量1.8k

点赞数

文章标签： html5设置透明度argb

Background背景色透明RGBA

时间:2013-03-16 00:44│来自: 信有UED│作者:JUN│点击:9704次

RGB不用说，大家都知道是什么，但RGBA是什么呢？ 1 2 background : rgb ( 0 , 0 , 0 ) ; background : rgba ( 0 , 0 , 0 , 0.5 ) ; 我们会发现RGBA里面新添加了一个值，但这个值又是什么呢？

RGB不用说，大家都知道是什么，但RGBA是什么呢？

background: rgb(0,0,0);

background: rgba(0, 0, 0,0.5);

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

浏览器的兼容性：

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

HTML代码：

Opacity效果

100%
80%
60%
40%
20%
0

CSS3的RGBA效果

CSS代码：

li.opacity { float:left; width:50px; height:50px;}

li.opacity1{ background:rgb(255,255,0); opacity:1; filter:alpha(opaity=100);}

li.opacity2{ background:rgb(255,255,0); opacity:0.8; filter:alpha(opaity=80);}

li.opacity3{ background:rgb(255,255,0); opacity:0.6; filter:alpha(opaity=60);}

li.opacity4{ background:rgb(255,255,0); opacity:0.4; filter:alpha(opaity=40);}

li.opacity5{ background:rgb(255,255,0); opacity:0.2; filter:alpha(opaity=20);}

li.opacity6{ background:rgb(255,255,0); opacity:0; filter:alpha(opaity=0);}

li.rgba { float:left; width:50px; height:50px; }

li.rgba1{ background:rgba(255,255,0,1);}

li.rgba2{ background:rgba(255,255,0,0.8);}

li.rgba3{ background:rgba(255,255,0,0.6);}

li.rgba4{ background:rgba(255,255,0,0.4);}

li.rgba5{ background:rgba(255,255,0,0.2);}

li.rgba6{ background:rgba(255,255,0,0);}

效果：

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

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

.rgba {

background: rgb(0,0,0); /*The Fallback color,这里也可以使用一张图片来代替*/

background: rgba(0, 0, 0,0.5);

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */

}

或者

.bg{

background:rgba(0, 0, 0, 0.65)!important;

filter:alpha(opacity=70);

background:#000;