更多用法
在任何需要设置颜色的地方都可以使用RGBA，例如：
| div { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); border: 10px solid rgba(255, 255, 255, 0.3); } |
为所有div设置透明度为30%线宽为10px的白色实线边界。
| 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属性
虽然这会影响在低版本浏览器里的效果，但这是最简单的方法，也是最保险的方法，具体操作如下：
| h1 { color: rgb(127, 127, 127); color: rgba(0, 0, 0, 0.5); } |
先设置rgb颜色在设置rgba颜色，这样不支持rgba属性的浏览器只会显示rgb颜色，而支持rgba的浏览器因为重定义的作用会显示rgba 颜色。
2.使用透明的PNG图片做背景
PNG格式的优点在于图片里的透明特性可以在网页里呈现出来，这里就用到了这个特点。
| h1 { background: transparent url(black50.png); background: rgba(0, 0, 0, 0.5) none; } |
通过透明度为50%的PNG背景达到了和rgba一样的效果。
3.IE hack
对IE6和IE7可以用IE的私用属性来解决，可达到部分和rgba一样的效果。
| h1 { filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#80000000', EndColorStr='#80000000'); } |
我们需要留意的是StartColorStr和EndColorStr的值，前两位是十六进制的透明度，后面六位是十六进制的颜色。
原文链接：CSS3 RGBA 属性高级用法
（举报）
