CSS3中,RGBa 为颜色声明添加Alpha通道。
RGB值被指定使用3个8位无符号整数(0 – 255)并分别代表红色、蓝色、和绿色。增加的一个alpha通道并不是一个颜色通道——它只是用来指定除其它三个通道提供的颜色信息之外的透明度。
- 100%
- 80%
- 60%
- 40%
- 20%
CSS样式
ul{ list-style: none}ul li{ padding:.5em}ul li.hundred{ background:rgba(0,0,255,1)}ul li.eighty{ background:rgba(0,0,255,0.8)}ul li.sixty{ background:rgba(0,0,255,0.6)}ul li.forty{ background:rgba(0,0,255,0.4)}ul li.twenty{ background:rgba(0,0,255,0.2)}
兼容性写法
div { background: rgb(200, 54, 54); /* 向下兼容 */ background: rgba(200, 54, 54, 0.5);}
浏览器对”color:rgb” 和”color:rgba” 是分开处理的。
RGBa的浏览器支持情况
浏览器,版本,操作系统 | 测试结果 | 退路 |
---|---|---|
Firefox 3.0+ | 支持 | — |
Firefox 2.0- | 不支持 | 纯色 |
webkit -safari 3.x+ | 支持 | — |
webkit -safari 2.0- | 不支持 | – |
Mobile Safari (iPhone/iPod Touch /iPad) | 支持 | — |
opera 10.x+ | 支持 | — |
Opera 9.x- | 不支持 | 纯色 |
IE 5.5 - | 不支持 | 无色 |
IE 6-8 | 不支持 | 纯色 |
IE 9 | 支持 | — |
Google Chrome 所有版本 | 支持 | — |
Netscape 所有版本 | 不支持 | 没有颜色 |
SeaMonkey 1.1.x | 不支持 | 无色 |
SeaMonkey 2.0 + | 支持 | — |
BlackBerry Storm Browser | 支持 | – |
IE下面的实现: