rgba()和opacity的比较

rgba()和opacity的比较

这段时间我想用opacity给背景加个透明度，但是发现它里面的子元素也继承了；如果你只是想给遮罩层加个透明度（就像优酷登陆时弹出的遮罩层上面是登陆框，如果登陆框也透明，你想想那是什么感觉）。当然解决的方法也有就是用平级元素，然后再定位；这就麻烦了！下面就引出css3中的rgba();

rgba语法:

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

对比：rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色

w3c上面的：
1. HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。
2. HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。
3. Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。
4. Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。
5. Lightness 同样是百分比值；0% 是黑色，100% 是白色。
HSLA 颜色
HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
HSLA 颜色值是这样规定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。