在 CSS3 中,增加了一个 opacity 属性,允许开发者设置元素的透明度,现在 opacity 已被主流的现代浏览器支持,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,这样的透明规则相当不灵活,在实际开发中往往也是会遇到很多麻烦。其实,在 CSS3 中还有另外一套颜色透明解决方案 —— RGBa 。相对于 opacity ,RGBa 可以在单个元素上设置透明度,而不影响其子元素,只是 RGBa 的浏览器支持度并没有 opacity 的广泛,因此相对较少引起开发者注意。
RGBA(R,G,B,A)
取值:
R:红色值。正整数 | 百分数
G:绿色值。正整数 | 百分数
B:蓝色值。正整数 | 百分数
A:Alpha透明度。取值0~1之间。
下面是用rgba() 设置50%透明度的白色.
RGBA是RGB色彩模型的一个扩展。这个缩写词代表红绿蓝三原色的首字母,Alpha值代表颜色的透明度/不透明度。
下面开始详细介绍 RGBa 颜色。
一. RGBa 颜色基础
RGBa 在本质上看也是为设置的元素增加了一个 alpha 通道,即在红色、绿色、蓝色三种颜色通道之外增加一个代表透明度的通道,其中 RGB 值使用我们熟悉的用3个 0 到 255 的整数分别表示红色、绿色、蓝色,而 alpha 取值则为 0 到 1 (小数位一位)。下面例举一个例子说明其具体的使用方式:
在 CSS 2.1 中,支持使用 RGB 色彩声明(尽管开发者可能更加习惯使用如:#343434 的 16 进制表示方式),例如要为 id 为 example 的 div 元素设置背景色 #343434 ,可以这样写
接下来再使用 RGBa ,把例子中的背景颜色修改成带 0.5 透明度。
增加透明度前后效果如下(为了更明显的反映透明度带来的效果,例子中的 body 增加了背景纹理):
新闻热点
疑难解答