RGBa 可以在单个元素上设置透明度,而不影响其子元素,只是 RGBa 的浏览器支持度并没有 opacity 的广泛,因此相对较少引起开发者注意。
RGBA的说明
RGBA(R,G,B,A)
RGBA参数取值
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度。取值0~1之间。
RGBA特别说明:
RGBA记法。此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度。
RGBA的兼容性
IE6-IE8不支持,别的主流浏览器都支持!
范例介绍
要为 id 为 example 的 div 元素设置背景色 #343434 ,可以这样写
/* RGB 表示方式 */ #example {background: rgb(52, 52, 52); }
接下来再使用 RGBa ,把例子中的背景颜色修改成带 0.5 透明度。
/* 设置 0.5 透明度 */ #example-a {background: rgba(52, 52, 52, 0.5); } /* 也可以省略小数点前的 0 */ #example-a {background: rgba(52, 52, 52, .5); }
增加透明度前后效果如下(为了更明显的反映透明度带来的效果,例子中的 body 增加了背景纹理):
可以看出,RGBa 只是在原有的 RGB 的基础上增加一个参数,这个改动虽小,却为开发者提供了很大的方便。
另外,RGBa 除了可以用在 background 属性外,还可以用在 color 和 border 属性(注:border 属性使用 RGBa 在 Firefox 中会与在其他浏览器中的效果略有不同)。
RGBa 相对 opacity 的优势是不会影响其子元素,即可以单独为被设置的元素设置透明度,而子元素而不受该设置影响。