颜色的alpha通道标识了色彩的透明度,它是一个0~1之间的取值,0标识完全透明,1标识完全不透明
在css中使用rgba可以为颜色添加alpha通道
.alpha {
/* 一个完全透明的颜色,等同于 transparent */
color: rgba(0, 0, 0, 0);
/* 一个完全不透明的颜色,等同于rgb */
color: rgba(0, 0, 0, 1);
/* 一个半透明的颜色 */
color: rgba(0, 0, 0, 0.5);
}
rgba还可以有多种书写方式,例如rgba(0, 0, 0, 0.5)
还可以写为:
rgb(0 0 0 / 50%)
#00000080
应用场景
- 制作一个遮罩层:设置背景为
background:rgba(0, 0, 0, 0.5)