购物车
登陆 / 注册
微信扫码登陆

推荐手册

RGBA

RGBA
rgba色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度
编辑:前端控 前端控 更新时间:2019-03-21 14:26:32
RGBA

说明:

RGBA(R,G,B,A)

取值:

  • R:红色值。正整数 | 百分数
  • G:绿色值。正整数 | 百分数
  • B:蓝色值。正整数 | 百分数
  • A:Alpha透明度,取值0~1之间。

说明:

RGBA记法

此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度。

IE6.0-8.0不支持使用 rgba 模式实现透明度,可使用 IE 滤镜处理

示例代码:

filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000);

#88000000 的前两位数字控制透明度,取值16进制从00 -> FF(越小越透明),00表示完全透明,FF就是全不透明,后面六位是色值。

扩展知识:

progid:DXImageTransform.Microsoft.Gradient()滤镜里的 startColorstr 参数值是 #AARRGGBB 形式的, 其中的AA是代表不透明

度的十六进制,00表示完全透明,FF就是全不透明,化成十进制的范围就是0~255,剩下的 RRGGBB 就是颜色的十六进制代码。

如:background: rgba(125, 0, 0, .3); 表示的是30%不透明度的红色背景。把30%的不透明度转换成十六进制的方法如下:先计算

#AA的的十进制x,x/255 = 3/10,解得x=3*255/10,然后再把x换算成十六进制,约等于4C。

常用透明度对应16进制关系:

.0(00) .1(19) .05(0C) .15(26)
.2(33) .3(4C) .25(3F) .35(59)
.4(66) .5(7F) .45(72) .55(8C)
.6(99) .7(B2) .65(A5) .75(BF)
.8(CC) .9(E5) .85(D8) .95(F2)

 兼容性:


浅绿 = 支持

红色 = 不支持

粉色 = 部分支持


IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
6.0-8.02.0+4.0+3.1+3.5+3.2+2.1+18.0+
9.0+



实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width:450px;
			height: 300px;
			background-color: rgb(255, 0, 0,0.3);
		}

	</style>
</head>
<body>
	<p>设置透明度为30%的红色</p>
	<div></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:


更多内容请参阅:CSS颜色值CSS颜色

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号