Background背景色透明RGBA和opacity的对比实例（转载）

jindong 发布于2019-08-30 13:04 / 2218人阅读

摘要：浏览器的兼容性如果庞统说是制作透明色透明背景色透明边框色透明前景色等，大家不由会想起这个东西。

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;

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

用rgba改变我的字体颜色

CSS代码
.norgba-color{ color:rgb(255, 0, 0);}
.rgba-color { color:rgba(255, 0, 0,0.5);}
效果：

第二种：边框色border-color
HTML代码

用rgba改变我的边框颜色

CSS代码
.norgba-border-color{ border:5px solid rgb(255,0,0); width: 200px; }
.rgba-border-color { border:5px solid rgba(255,0,0,0.5); width: 200px; }
效果：

第三种：字体的阴影色text-shadow
HTML代码

用rgba改变我的字体阴影颜色

CSS代码
.norgba-text-shadow { text-shadow:0 2px 1px rgb(255,0,0);}
.rgba-text-shadow { text-shadow:0 2px 1px rgba(255,0,0,0.3);}
效果：

第四种：改变边框阴影色
HTML代码
p class="norgba-box-shadow">用rgba改变我的边框阴影颜色

用rgba改变我的边框阴影颜色

CSS代码
.norgba-box-shadow{

border:5px solid green;  
width:200px;  
-webkit-box-shadow:0 2px 2px rgb(255,0,0);  
-moz-box-shadow:0 2px 2px rgb(255,0,0);  
box-shadow:0 2px 2px rgb(255,0,0);

}
.rgba-box-shadow {

border:5px solid green;  
width:200px;  
-webkit-box-shadow:0 2px 2px rgba(255,0,0,0.6);  
-moz-box-shadow:0 2px 2px rgba(255,0,0,0.6);  
box-shadow:0 2px 2px rgba(255,0,0,0.6);

}
效果：

通过上面浏览器兼容列表会发现不是所有的浏览器都支持RGBA，所以我们在用的时候也要考虑到这个情况。
当前文章地址：http://www.shejicool.com/web/html_css/417.html

云服务器 GPU云服务器 html背景色透明化和Background的区别 html透明色设置 html透明色rgb

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115285.html

Background背景色透明RGBA和opacity的对比实例（转载）

摘要：浏览器的兼容性如果庞统说是制作透明色透明背景色透明边框色透明前景色等，大家不由会想起这个东西。 Background背景色透明RGBA时间:2013-03-16 00:44│来自: 信有UED│作者:JUN│点击:9704次RGB不用说，大家都知道是什么，但RGBA是什么呢？ 1 2 background : rgb ( 0 , 0 , 0 ) ; background : rgba ...

Pines_Cheng 2019-08-02 15:55 评论0 收藏0
CSS2-盒模型、背景图片

摘要：合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。雪碧图的使用背景图与元素的原点重合。白色框是元素，绿色框是背景图片。盒模型属性 margin外边距（top,right,bottom,left）border边框(top,right,bottom,left)padding内边距(top,right,bottom,left)content内容区(width,height)ma...

yuanzhanghu 2019-08-29 15:33 评论0 收藏0
CSS学习摘要-数值和单位及颜色

摘要：每对十六进制数代表一个通道红色绿色或者蓝色允许我们指定个可用值。例如，这个代码给出以下结果这些值比较复杂，不太容易理解，但是它们比关键字更灵活您可以使用十六进制值来表示您想要在颜色方案中使用的任何颜色。在CSS中，值的类型有很多种，一些很常见，一些你却几乎没怎么遇到过。我们不会在这篇文档中面面俱到地描述他们，而只是这些对于掌握CSS可能最有用处的这些。本文将会涉及如下CSS的值：数值: ...

luckyyulin 2019-04-23 13:40 评论0 收藏0
《CSS世界》笔记五：CSS层叠规则及元素隐藏

摘要：元素层叠顺序补充说明位于最下面的特指层叠上下文元素后面会详解的边框和背景色。界中可能有其他的层叠结界，而自身也可能处于其他层叠结界中。上一篇：《CSS世界》笔记四：流的保护与破坏写在前面《CSS世界》这本书还剩六章，但是这本书的精华部分主要是前面的内容，这里仅把后面章节相对重要的内容以博客展示，想着了解更多的小伙伴还是去阅读原文的好，毕竟三百多页的一本书并不是小小几篇博客能完全说...

godruoyi 2019-08-29 16:21 评论0 收藏0
HTML与CSS中的颜色与单位个人分享

摘要：颜色与单位安全色有中其中色彩有中非色彩中前景色与背景色前景色就是设置字体的颜色背景色就是为指定元素设置背景色浏览器默认背景色的颜色为透明色颜色的命名使用单词方式定义颜色目前主流浏览器识别种预定义颜色问题可选的颜色数量有限不同浏览器中存在颜色与单位 Web安全色有216中其中色彩有210中,非色彩6中前景色与背景色前景色就是设置字体的颜色背景色就是为指定元素设置背景色 - 浏...

PAMPANG 2019-08-29 16:33 评论0 收藏0