rgba 颜色
原本 CSS 中的颜色除了可用 16 进位来表示 RGB 颜色值之外，还可以使用预先定义好的颜色名称。而 RGBA 是以 RGB 为基础再加上不透明度的属性。
CSS Code复制内容到剪贴板
rgba(red, green, blue, opacity)
其中的 red、green 及 blue 等颜色值是用 10 进位或是百分比(%)的方式来表示，允许的值为 0 到 255 之间的整数值；而 opacity 不透明度允许的值为 0 到 1 之间带有小数的数值。
快速的看一下实际的范例：
XML/HTML Code复制内容到剪贴板
<body>
<div class="rgba1">rgba(0, 0, 0, 1)</div>
<div class="rgba2">rgba(100%, 100%, 0%, 0.75)</div>
<div class="rgba3">rgba(144, 180, 60, 1)</div>
<div class="rgba4">rgba(204, 102, 102)</div>
<div class="rgba5">rgba(300, -102, 0, 1)</div>
<div id="log"></div>
</body>
接着换 CSS：
CSS Code复制内容到剪贴板
div {
width: 220px;
height: 50px;
float: left;
margin-right: 10px;
line-height: 50px;
text-align: center;
border: 1px solid #000;
}
基本用法：
CSS Code复制内容到剪贴板
.rgba1 {
/* 等同于 #ffffff 或是 rgba(100%, 100%, 100%, 1) */
color: rgba(255, 255, 255, 1);
/* 等同于 #000000 或是 rgba(0%, 0%, 0%, 1) */
background-color: rgba(0, 0, 0, 1);
}
.rgba3 {
background-color: rgba(144, 180, 60, 1);
}
除了给实际的颜色值之外，也可以用百分比(%)来表示：
CSS Code复制内容到剪贴板
.rgba2 {
background-color: rgba(100%, 100%, 0%, 0.75);
}
若是 opacity 值没给的话，预设会用 0；这样表示是透明(transparent)喔：
CSS Code复制内容到剪贴板
