RGBA是对原始的RGB的扩展,它加入了第四个参数:alpha通道。alpha通道参数采用0 到1之间的小数,就像opacity那样。使用RGBA而不是opacity的优势是,当使用RGBA的时候,透明不会被应用到子元素。这也就一位着,你可以在一个透明对象里面使用一个完全不透明的子对象,而当你使用opacity的时候,透明对象的子元素也是透明的。
RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值。
兼容:Firefox 3.0.10 Chrome 2.0.x Opera 9.64 Safari 4 Firefox 3.5
如以下代码:div { background: rgb(255,0,0); /* The old one */ background: rgba(255,0,0,0.5); /* The new one */ }
那么在IE中怎么办呢:请看下面:
<!--[if IE]> <style type="text/css"> .color-block { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050); zoom: 1; } </style> <![endif]-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <meta name="robots" content="all" /> <meta name="author" content="Tencent-ISRD" /> <meta name="Copyright" content="Tencent" /> <title>RGBA colors</title> </head> <body> <div style="background-color: rgba(0,0,0,0.5);">在Firefox的浏览器里能看到alpha值为0.5的黑色背景</div> </body> </html>
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索颜色
, 参数
, 透明
, rgba
, 通道
数值
,以便于您获取更多的相关知识。