R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度。取值0~1之间。取值 为0表示完全透明,取值为1时表示完全不透明。
rgba()和opacity都能实现透明效果,但区别在于
rgba()只作用于元素自身的颜色或背景色,对元素的内容没有影响;
opacity在作用于元素自身的颜色或背景色的同时,也作用于元素内的内容的透明度
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.rgba{
width:200px;
height:200px;
background: rgba(255,0,0,0.5);
}
.opacity{
margin-top: 20px;
width:200px;
height:200px;
background: red;
opacity: 0.5;
}
</style>
</head>
<div class="rgba">rgba</div>
<div class="opacity">opacity</div>
</body>
</html>