貌似最近网上对CSS3的讨论真的很火，现在讲一下CSS3里目前用的比较广的RGBA属性的高级使用方法。这个属性的兼容问题比较简单，IE8已经支持这个属性，IE6和IE7也可以通过hack支持。RGBA和CSS2里的RBG属性差不多，只是RGBA属性多了一个透明度的定义，CSS3标准里对RGBA属性的解释如下：

1
2
3
4
5

/* 基本语法 */
em { color: Rgba(red,green,blue,opacity) }
/* 举例 */
em { color: rgba(255,0,0,1) }    /* 红色，不透明 */
em { color: rgba(100%,0%,0%,1) } /* 同上 */

在现实中，使用三个1~255的十进制数值去定义一个颜色比用百分比更加准确，下面是几个颜色的RGB数值，大家在使用的时候只需要把00~FF的16进制数值换算成十进制就行了。

如何使用RGBA属性

RGBA的强大之处在于，通过对透明度的定义和不同层的颜色混合可以呈现出更多的颜色，就像颜料的混合一样。举一个例子，我们先为页面设置一个背景图片，接着为页面里的H1里的内容设置一个颜色，例如：

1
2
3
4

h1 {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
}

效果如下：

这里可以看到H1并没有透明效果

但如果我没对H1设置一个整体的透明度（opacity属性）的话，效果会变成怎样呢？

1
2
3
4
5

h1 {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	opacity: 0.5;
}

在这里我们看到的效果是整个H1包括文字都呈现50%的透明度。可是文字透明是影响阅读的，我们用RGBA属性单独设置H1的背景色试试。

1
2
3
4

h1 {
	color: rgb(0, 0, 0);
	background-color: rgba(255, 255, 255, 0.5);
}

这是我们可以看到H1的背景成50%透明的白色，但里面的文字还是不透明的黑色。当然，你也可以只让H1里的文字透明。

1
2
3
4

h1 {
	color: rgba(0, 0, 0, 0.5);
	background-color: rgb(255, 255, 255);
}

只让文字透明，可以用来创建剪纸效果。

更多用法

在任何需要设置颜色的地方都可以使用RGBA，例如：

1
2
3
4
5

div {
	color: rgb(0, 0, 0);
	background-color: rgb(255, 255, 255);
	border: 10px solid rgba(255, 255, 255, 0.3);
}

为所有div设置透明度为30%线宽为10px的白色实线边界。

1
2
3
4
5
6
7
8

div {
	color: rgba(255, 255, 255, 0.8);
	background-color: rgba(142, 213, 87, 0.3);
}
div:hover {
	color: rgba(255, 255, 255, 1);
	background-color: rgba(142, 213, 87, 0.6);
}

鼠标滑过改变透明度。

另外如果和JavaScript配合的话，RGBA属性可以创造出更加炫目的效果。

改变你的CSS编写习惯

在以上的例子中你可以看到作者一直在使用rgb()去指定颜色，而不使用传统的#xxx形式的十六进制表示方法。这是一个为CSS3的RGBA属性准备的写法，用rgb()指定颜色可以理解为rgba()不透明，但两者的差别非常小，这会对将来升级到rgba()带来很大的方便。

兼容所有浏览器

虽然目前主流浏览器的最新版本都已经支持RGBA属性，但我们还必须照顾使用旧版浏览器的用户，因此在某些地方我们用老方法会保险一些。方法也有好几种，大家按需选择。

1.低版本不使用RGBA属性

虽然这会影响在低版本浏览器里的效果，但这是最简单的方法，也是最保险的方法，具体操作如下：

1
2
3
4

h1 {
	color: rgb(127, 127, 127);
	color: rgba(0, 0, 0, 0.5);
}

先设置rgb颜色在设置rgba颜色，这样不支持rgba属性的浏览器只会显示rgb颜色，而支持rgba的浏览器因为重定义的作用会显示rgba颜色。

2.使用透明的PNG图片做背景

PNG格式的优点在于图片里的透明特性可以在网页里呈现出来，这里就用到了这个特点。

1
2
3
4

h1 {
	background: transparent url(black50.png);
	background: rgba(0, 0, 0, 0.5) none;
}

通过透明度为50%的PNG背景达到了和rgba一样的效果。

3.IE hack

对IE6和IE7可以用IE的私用属性来解决，可达到部分和rgba一样的效果。

1
2
3

h1 {
	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#80000000', EndColorStr='#80000000');
}

我们需要留意的是StartColorStr和EndColorStr的值，前两位是十六进制的透明度，后面六位是十六进制的颜色。

后记

本文译自《Working With RGBA Colour》，本人做了修改，主要是觉得原文的排版表达有的不是很好，并且增加了IE的hack。