css背景色rgb、rgba、hsl、hsla、opacity的使用详解

我们先从最简单的例子开始：为整个页面添加背景色。

body {
	background-color:#f7f7f7;
}

也可以使用更简短的写法：

body {
	background:#f7f7f7;
}

区别：
第二个属性是第一个属性的简写，通过它可以一次性的设置与背景相关的多个属性。上面的例子中，表面上只声明了背景颜色，实则同时也设置了除背景色之外的其它值（比如图片），只不过把其它属性重置为了默认值。

body {
	background:url('img/test.jpg') 50% 50% / cover no-repeat padding-box content-box #f7f7f7;
}

说明：
1.因background-position与background-size都可以设置长度值，为了区分，首先要声明background-position,后声明background-size,且要以斜杠（/）分隔。
2.因（border-box、padding-box、content-box）这些值既可以用于background-origin,又可以用于background-clip,所以为了区分它们，首先要设置background-origin,再声明background-clip。

上面的例子中，颜色值我使用了十六进制的方法表示。所谓十六进制表示法，就是一个#后加上6位十六进制数字组成的字符串。这个字符串由3组数字（每组2位）构成，每个数字的取值范围是0~F。十六进制的意思就是每个数字都可能有16种不同的值，因此除了0-9这10个数，还要用A-F补足第11-16位数。

3组数字分别代表颜色红、绿、蓝通道的值。每种颜色通道的值有256种可能（16 * 16 = 256），即2位十六进制数所能表示的可能性。
写法：如果3组数中每2位数字相同，可以简写成3位数字。如：#aabbcc可简写成#abc,#334455可简写成#345;

RGB 和 RGBA
rgb表示法反映的是计算机如何在显示器上显示颜色，即红、绿、蓝三原色的组合。
rab()函数表示法的3个参数都可以是一个十进制数值，取值范围0~255；也可以是一个百分比值，取值范围为0%-100%。如：

body {
	background-color:rgb(186,218,85);
}

rgba是rgb的加强版，末尾的a表示alpha,是用于控制透明度的阿尔法通道值。如果你想设置同样颜色的背景，但透明度为40%，可以这样写：

body {
	background-color:rgba(186,218,85,0.4);
}

第四个参数值表示透明度，取值范围为0~1.0，1.0表示不透明，0表示完全透明。

HSL 和 HSLA
hsl的意思是色相-饱和度-亮度(hue-saturation-lightness)。hsl()函数表示法需要3个参数，第一个是角度，第二个和第三个是百分比值。分别代表“饱和度”和”亮度“，用过图形处理软件的人应该见过HSL色轮。这里不做解释。

body {
	background-color:hsl(186,218,85);
}

hsla和rgba类似，最后一个参数也是接受透明度的。

body {
	background-color:hsla(186,218,85,0.4);
}

opacity

body {
	background-color:#555;
	opacity:0.5;
}

opacity属性也是可以控制透明度的，那么和rgba、hsla有什么区别呢？
在前面的例子中，我们只让背景色变得透明了，而这里，我们让整个元素变得透明了，**包括元素中包含的内容。**使用opacity把元素设置为透明后，将无法把子元素变得不透明。

推荐一个颜色对比度参考网站：Contrast Rebellion。