CSS rgba() 语法
在 CSS 中，rgba() 函数用于通过红 (red)、绿 (green)、蓝 (blue) 、透明度 (alpha) 这 4 个通道的值来定义颜色值。
在最新版本的 CSS 中，rgba() 和 rgb() 这两个函数已经合并了。
语法：
rgba(red, green, blue, alpha)说明：
rgba() 函数接受以下 2 种参数。
red、green、blue：它们可以是：- 整数：取值范围为 0 到 255 之间。取值范围为 0 到 255 之间。
- 百分比：取值范围为 0% 到 100% 之间。
alpha：是一个介于 0 和 1 之间的数字。其中，0 表示完全透明，1 表示完全不透明。
示例：
rgba(255, 0, 0, 0.5); /* 半透明红色 */
rgba(0, 255, 0, 0.3); /* 透明绿色 */
rgba(0, 0, 255, 1); /* 不透明蓝色 */提示: rgba() 函数可以用于设置任何接受颜色值的 CSS 属性，比如 color、background-color、border-color 等。
CSS rgba() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS rgba() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS rgba() 函数是如何使用的。
示例 1：rgba() 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div:nth-child(1) {
background-color: rgba(255, 0, 0, 0.8); /* 红色，80% 不透明度 */
}
div:nth-child(2) {
background-color: rgba(255, 0, 0, 0.5); /* 红色，50% 不透明度 */
}
div:nth-child(3) {
background-color: rgba(255, 0, 0, 0.3); /* 红色，30% 不透明度 */
}
</style>
</head>
<body>
<div>绿叶网</div>
<div>绿叶网</div>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
示例 2：rgba() 实现背景渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.8), rgba(0, 0, 255, 0.2));
}
</style>
</head>
<body>
<div>绿叶网 - 为好教程，全力以赴。</div>
</body>
</html>页面效果如下图所示。
分析：
通过在线性渐变中使用 rgba() 函数，我们可以创建具有透明效果的渐变效果。rgba() 可以使得渐变更加柔和，并与页面其他元素更好地融合。
