RGBA

RGBA是一种可以设置颜色值和透明度的CSS颜色


 
下面是用rgba() 设置50%透明度的白色.
 
p {
  color: rgba(255, 255, 255, 0.5);
}
RGBA是RGB色彩模型的一个扩展。这个缩写词代表红绿蓝三原色的首字母,Alpha值代表颜色的透明度/不透明度。
 
RGBA语法
 
RGBA色彩表示法的格式为:
 
rgba(red, green, blue, alpha)
前三个值(红绿蓝)的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。
如果你想设置纯红色,那么把red参数设置满,即255,绿,蓝设置0即可。
 
background-color: rgba(255, 0, 0, 1);
结果:
 
也可使用百分比:
 
background-color: rgba(100%, 0%, 0%, 1);
结果:
 
第四个值, alpha, 制定了色彩的透明度/不透明度,它的范围为0.0到1.0之间
 
下面的例子是设置50%透明度的黄色:
 
color: rgba(255, 242, 0, 0.5);
03-08
### RGBA颜色模型概述 在计算机图形学中,RGBA是一种扩展自RGB的颜色模型,在红(Red)、绿(Green)、蓝(Blue)三原色基础上增加了Alpha通道用于表示透明度[^1]。当Alpha值设为完全不透明时(通常是1),该模型就简化为了标准的RGB模式。 ### 使用方法 对于HTML/CSS环境下的应用而言,定义一个带有透明效果的颜色非常简单: - **语法结构**:`rgba(red, green, blue, alpha)`其中red,green,blue取值范围是从0到255之间的整数;alpha则是一个介于0至1之间的小数值,用来指定对象的透明程度——越接近0就越透明,而接近1则是更趋向于完全不透明白色[^2]。 #### 实际案例展示 下面给出一段简单的CSS代码片段作为例子说明如何利用RGBA创建半透明背景的效果: ```css div { background-color: rgba(76, 175, 80, 0.5); } ``` 上述代码将会给页面内的所有`<div>`标签赋予一种具有特定饱和度的绿色,并且这种颜色会呈现出一半的透明度,使得底层的内容能够部分显现出来。 另外,在JavaScript库如Cesium当中也可以看到类似的实现逻辑,不过具体的API调用可能会有所不同。例如更改三维场景内某个物体的颜色并调整其透明度可参照如下做法[^4]: ```javascript // 设置被选中的实体显示为红色且保持一定透明度 entities.model.color = Cesium.Color.fromBytes(255, 0, 0, 127); // 或者直接使用预定义的方法传递参数 entities.model.color = new Cesium.Color(1.0, 0.0, 0.0, 0.5); ``` 这两行命令分别展示了两种不同的途径去达到同样的目的—让选定的对象呈现为具有一定透明度的红色外观。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值