CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。今天这篇文章我们一起来探讨一下 CSS3 中的 RGBA 属性。RGB 对于大家来说一点不陌生，他就是 Red（红色） Green（绿色）和 Blue（蓝色），那么现在我们所说的 RGBA 又是什么呢？
- Web 开发人员和设计师必读文章推荐
- 20个非常绚丽的 CSS3 特性应用演示
- 35个让人惊讶的 CSS3 动画效果演示
- 推荐12个漂亮的 CSS3 按钮实现方案
- 24款非常实用的 CSS3 工具终极收藏
RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）的色彩空间。虽然它有的时候被描述为一个颜色空间，但是它其实仅仅是 RGB 模型附加了额外的信息从而形成了我们今天需要讨论的 RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。
基本语法:
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
取值区间：
<length> ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
<percentage> ：Saturation(饱和度)。 取值为0%到100%之间的值；
<percentage> ：Lightness(亮度)。 取值为0%到100%之间的值；
<opacity> ：alpha(透明度)。 取值在0到1之间；
简单说明：
RGB 色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。
RGBA 在 RGB 的基础上多了控制 Alpha 透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。
浏览器的兼容性：
如果庞统说 RGBA 是制作透明色（透明背景色、透明边框色、透明前景色等），大家不由会想起 opacity 这个东西。他在我们 CSS2 中制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就只能在边上站着了，有心无力呀。
现在我们先来看一个 RGBA 和 Opacity 的对比实例，HTML 代码：
<p>Opacity效果</p>
<ul>
<li >100%</li>
<li >80%</li>
<li >60%</li>
<li >40%</li>
<li >20%</li>
<li >0</li>
</ul>
<p>CSS3的RGBA效果</p>
<ul>
<li >1</li>
<li >0.8</li>
<li >0.6</li>
<li >0.4</li>
<li >0.2</li>
<li >0</li>
</ul>
</div>
我们分别给这两上 ul 中的 li 应用相关样式， 在 li.opacity 中我用使用 CSS2 中的 Opacity 而在 li.rgba 中我们使用 CSS3 的 RGBA新属性。
Opacity样式
float: left;
width: 50px;
height: 50px;
}
li.opacity1 {
background: rgb(255,255,0);
opacity: 1;
filter:alpha(opaity=100);
}
li.opacity2 {
background: rgb(255,255,0);
opacity: 0.8;
filter:alpha(opaity=80);
}
li.opacity3 {
background: rgb(255,255,0);
opacity: 0.6;
filter:alpha(opaity=60);
}
li.opacity4 {
background: rgb(255,255,0);
opacity: 0.4;
filter:alpha(opaity=40);
}
li.opacity5 {
background: rgb(255,255,0);
opacity: 0.2;
filter:alpha(opaity=20);
}
li.opacity6 {
background: rgb(255,255,0);
opacity: 0;
filter:alpha(opaity=0);
}
RGBA样：
float: left;
width: 50px;
height: 50px;
}
li.rgba1 {
background: rgba(255,255,0,1);
}
li.rgba2 {
background: rgba(255,255,0,0.8);
}
li.rgba3 {
background: rgba(255,255,0,0.6);
}
li.rgba4 {
background: rgba(255,255,0,0.4);
}
li.rgba5 {
background: rgba(255,255,0,0.2);
}
li.rgba6 {
background: rgba(255,255,0,0);
}
我们来看看其效果：
效果中我们可以看出，他们相同之处就是背景色完全是一样的，但区别就是一直让大家觉得头痛的问题，那就是 Opacity 后代元素会随着一起具有透明性，所以我们 Opacity 中的字随着透明值下降越来越看不清楚，而 RGBA 不具有这样的问题，但是其支持的浏览器中有一个占在大市场份额的 IE 不支持，这也就是让我们需要去做兼容，（听到兼容二字大家是不是特烦，我也是的）希望 IE 早点能实现。
在 CSS2 中 Opacity 能实现透明，而且大多主流浏览器都支持，虽然 IE 下有点麻烦：
filter: alpha(opacity=80);
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* Everyone else */
opacity: 0.8;
那为什么不使用 Opacity 而要使用 RGBA 呢？
从我们上面的实例中我们也知道，RGBA 比元素设置 CSS 的透明度更好，因为单独的颜色可以在不影响整个元素的透明度，他不会影响到元素其他的属性，比如说边框，字体同时也不会影响到其他元素的相关透明度。
在 RGBA 还没有出世前，我们都是使用 Opacity 来做透明，但这里存在一个问题，就是我们在父元素中使用了 Opacity，那么其垢代元素都会受其影响，我想这个问题大家都有碰到过，为了解决这样的问题我们需要增加一个空的 div 来专门放置使用透明的背景，然后通过使用绝对定位来实现我们需要的结果。为了更好的理解我们在这里来看一个使用 Opacity 的实例。首先来看 HTML：
<div >
<div >
<p>我是bg的后代元素，我不想我的前景有任何透明!怎么办?</p>
</div>
</div>
</div>
先给他们附上相应的样式：
width: 200px;
height: 100px;
border: 1px solid #ccc;
background: red;
position: relative;
}
.bg {
background: black;
opacity: 0.5;
filter:alpha(opaity=50);
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
.bg p {
padding: 5px 10px;
color: white;
}
效果：
从效果中我们明显的看出，这里和我们前面那个例子一样，名叫 bg 的 div 中设置了Opacity，造成其后代元素段落P的前景色也随着变了。如果需要解决这样的问题，在不使用别的新技术下，也就是说坚持使用 Opacity。那么我们就需要添加一个空的层，在这个地方应用透明背景层首先来看看改变一下 HTML 结构吧
Jquery样式操作
< head>
<title > JQuery样式操作</ title >
<style type="text/css">
#div1 {color : Red;}
</style >
<script src="/blog_article/js/jquery-1.5.1.min.js" type="text/javascript"></ script >
<script type="text/javascript">
$( function () {
var $divs = $("div" );
//1.为css传一个参数，是获得 指定的 样式 值
//var col = $divs.css("color");//即使是在类样式中定义color 仍然可以得到red结果 不同于js
//alert(col);
//2.设置 一个 样式 的值
//$divs.css("color", "blue");
//3.一次设置多个样式的值 传入json格式
//$divs.css({ "color": "#ff6600","fontSize":"88px" });
//var $divs2 = $divs.css("color", "blue").css("fontSize", "88px");
//$divs2.slideUp(5000);//因为Jquery会返回修改的对象 所以可以实现链式编程
//4.设置 元素的 value属性值
//$("#txtName").val("哈哈哈哈哈");
//alert($("#txtName").val());
//5.使用 text()方法 设置 文本(innerText)
//$("#div2").text("<div>王小丫，是男的？</div>");
// var $waoxiaoya = $("#waoxiaoya");//Jqurey中的迭代 如果Jquery对象数组$waoxiaoya长度为空的话 自然就不会执行.html方法了
//if ($waoxiaoya.length > 0) {
// $$waoxiaoya.html("哈哈哈哈哈，你丫不存在！");
//}
})
</script&
Jquery循环map与each
<head>
<title ></title>
<script src="/blog_article/Js/jquery-1.5.1.js" type="text/javascript"></ script>
<script type="text/javascript">
$( function () {
var arr = [3, 5, 9];
//-----------$.map(array,fn):用来将一个数组，转成另一个数组。
var arr2 = $.map(arr, function (item) { return item * 2; });
var arr3 = MyMap(arr, function (item) { return item * 2; }); //联想C#委托的例子。函数式编程。
for (var i = 0; i < arr8.length; i++) {
alert(arr2[i]); //6 10 18
alert(arr3[i]); //6 10 18
alert(arr8[i]);
}
function MyMap(arr, func) {//func这个函数就叫回调函数 回调函数：自己定义，系统调用。
var newArr = new Array(arr.length);
for (var i = 0; i < arr.length; i++) {
newArr[i] = func(arr[i]);
}
return newArr;
}
//-----------$.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值。
&nb