CSS3rgbandrgba（透明⾊）的使⽤详解
对于颜⾊相信⼤家都很敏感，眼睛所见之处都存在颜⾊，那在css中我们⽤什么来表⽰颜⾊呢？CSS 中的颜⾊有三种定义⽅式：使⽤颜⾊⽅法（RGB、RGBA、HSL、HSLA)，⼗六进制颜⾊值和预定义的颜⾊名称。我们常使⽤的是RGB与RGBA。那我们就来说⼀下它们之间的区别吧！
rgb与rgba的含义
RGB 是代表Red（红⾊）、Green（绿⾊）、 Blue（蓝⾊）三个单词的缩写。RGBA 颜⾊值是 RGB 颜⾊值的扩展，添加了⼀个 alpha 通道，它规定了对象的不透明度。
1、基本语法:
R：红⾊值。正整数（0~255）或百分数（0.0% - 100.0%）
G：绿⾊值。正整数（0~255）或百分数（0.0% - 100.0%）
B：蓝⾊值。正整数（0~255）或百分数（0.0% - 100.0%）
A：透明度。取值0~1之间，不可为负值
2、浏览器的兼容性：
RGB的兼容：
RGBA的兼容：
3、rgb与rgba的书写格式
rgb的书写格式：rgb(90,50,25);
其中第⼀个数字（90）表⽰Red 颜⾊（红⾊值），第⼆个数字（50）表⽰Green 颜⾊（绿⾊值），第三个数字（25）表⽰Blue 颜⾊（蓝⾊值）。数字越⼤（不超过255）则表⽰其对应的颜⾊加的越多。rgba的书写格式：rgba(90,50,25,0.5);
从上⾯我们可以得到 RGBA 颜⾊值是 RGB 颜⾊值的扩展，添加了⼀个 alpha 通道，它规定了对象的不透明度。前⾯三个数值跟 rgb表⽰的是⼀样的，a 的值为0~1之间的值，0表⽰透明⾊，1表⽰不透明，0.5表⽰每个（R、G、B）颜⾊50%的透明度，也就是每个颜⾊半透明状态。这⾥的a还可以简写成 .5，这⾥只要是有⼩数点的透明度，都可以这样简写。
rgb与rgba的区别
1、rgb+opacity（IE下不兼容）
因为rgba中的 a 表⽰对象的透明度，所以这⾥利⽤ opacity 属性（也表⽰透明度）+ rgb来说明⼀下rgb与rgba的区别。opacity 属性还可以⽤ filter 属性来表⽰，例如：filter:Alpha(opacity=50)，这⾥的50表⽰的50%的透明度。例⼦如下：
<div class="box">
<p>rgb+opacity:</p>
<div class='one'>25%</div>
<div class='two'>50%</div>
<div class='three'>75%</div>
<div class='four'>100%</div>
</div>
.box{
margin-bottom: 10px;
overflow: hidden;
}
.box>div{
width:100px;
height:100px;
float: left;
}
.box>div{
background:rgb(255,0,0)
}
.box>.one{
opacity:.25;
}
.box>.two{
opacity:.5;
}
.box>.three{
opacity:.75;
}
.box>.four{
opacity:1
}
从上⾯的例⼦中我们可以看出随着透明度的变化，div 会具有透明性，div 上的⽂本也会随之具有透明度，越来越看不清。
2、rgba
因为rgba中的 a 表⽰对象的透明度，所以这⾥可以直接利⽤background搭配rgba来说明透明这个问题。例⼦如下：
<div class="box1">
<p>rgba</p>
<div class='one'>25%</div>
<div class='two'>50%</div>
<div class='three'>75%</div>
<div class='four'>100%</div>
</div>
```css
.box1>div{
width:100px;
height:100px;
float: left;
}
.box1>.one{
background:rgba(255,0,0,1);
}
.box1>.two{
background:rgba(255,0,0,.75);
}
.box1>.three{
background:rgba(255,0,0,.5);
}
.box1>.four{
background:rgba(255,0,0,.25);
}
从上⾯的例⼦中我们可以看出随着透明度的变化，div 会具有透明性，div 上的⽂本并没有受到透明度的影响，保持着⽂本的⾃⾝颜⾊。RGBA 不单可以应⽤在 background 上，我们还可以应⽤在只要设置了颜⾊的地⽅都可以使⽤，在这⾥简单的说⼀下⼏种：
第⼀种：字体颜⾊，设置颜⾊的同时可以设置透明度。
<p class="p1">字体颜⾊</p>
<p class="p2">字体颜⾊</p>
.p1{
color:rgb(255,0,0)
}
.p2{
color:rgba(255,0,0,.5)
}
第⼆种：边框⾊border-color
<div class="div3"></div>
<div class="div4"></div>
.div3,.div4{
width:100px;
height:100px;
background:#f00;
}
.div3{
border:5px solid rgb(0,0,0)
}
.div4{
border:5px solid rgba(0,0,0,.2)
}
第三种：字体的阴影⾊text-shadow
<p class="p1">字体阴影颜⾊</p>
<p class="p2">字体阴影颜⾊</p>
.p1{
box shadow怎么设置text-shadow:1px 2px 1px rgb(255,0,0) ;
}
.p2{
text-shadow:1px 2px 1px rgba(255,0,0,.5) ;
}
第四种：改变边框阴影⾊
<div class="div3"></div>
<div class="div4"></div>
.div3,.div4{
width:100px;
height:100px;
background:#000;
}
.div3{
box-shadow: 1px 5px 5px rgb(255,0,0);
margin-bottom: 20px;
}
.div4{
box-shadow: 1px 5px 5px rgba(255,0,0,.5) ;
}
总结
1、从我们上⾯的实例中我们也知道，RGBA ⽐元素设置 CSS 的透明度更好，因为单独的颜⾊可以在不影响整个元素的透明度，他不会影响到元素其他的属性，⽐如说边框，字体同时也不会影响到其他元素的相关透明度。
2、使⽤ Opacity 来做透明，在⽗元素中使⽤了 Opacity，那么其它⼦元素都会受到影响。
3、最后需要告诉⼤家的⼀点， RGBA 这种⽅法，⽬前只有在⽀持 RGBA 属性的浏览器才能正常显⽰。
到此这篇关于CSS3 rgb and rgba（透明⾊）的使⽤详解的⽂章就介绍到这了，更多相关CSS3 rgb and rgba内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。