CSS-Learning | background-color属性如何设置背景颜色以及选取颜色值、透明度方法

背景颜色

CSS中设置背景颜色，可以通过两个属性：background-color属性和background属性。

// background-color属性
body {
	background-color: #bada55;
}

// background属性
body {
	background: #bada55;
}

background是一个简写属性，通过它可以一次性设置与背景相关的多个属性。前面例子中，我们只通过这个简写属性设置了颜色，其实同时还设置了除背景颜色以外的其他值，只不过把其他属性重置为默认值。如果不注意，可能会意外覆盖前面已经设置的值。

颜色值

取颜色值有多种方法：

1. 十六进制表示法

   所谓十六进制表示法，就是#后面加上6位十六进制数字构成的字符串。这个字符串由3组数字（每组各2位）构成，每个数字的取值范围是0～F。

   3组数字分别表示颜色中的红、绿、蓝（RGB）通道的值。每种颜色通道的值有256种可能，也就是2位十六进制数所能表示的可能性（16*16=256）。

   如果3组数字中每组的2位数字相同，可以简写成3位数字，比如#aabbcc可以简写为#abc。

2. rgb()函数式表示法

   RGB的每个值可以是一个十进制数值，取值范围为0～255；也可以是一个百分比值，取值范围为0%～100%。

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

3. hsl()函数式表示法

   十六进制和RGB表示法反映的都是计算机如何在显示器上显示颜色，即红、绿、蓝三原色的混合。
   hsl()函数式表示法则反映了另一种描述颜色的方式：色相-饱和度-亮度，即HSL模型。色相的值取自如下所示的色轮。颜色的融入关系取决于度数：红色在顶部（0度），绿色在顺时针1/3圆的位置（120度），而蓝色在2/3圆的位置（240度）。

   

   使用hsl()语法需要传入三个参数，第一个是角度，第二和第三个是百分比。这两个百分比值分别代表“颜料”的量（饱和度）和亮度。

   .box {
   	background-color: hsl( 74, 64%, 59% );
   }
   

4. rgba()函数式表示法

   rgba()是RGB的加强版，末尾的a表示alpha，是用于控制透明度的阿尔法通道。

    ```css
    .box {
    	background-color: rgba( 186, 218, 85, 0.5 );
    }
    ```
   

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

5. hsla()函数式表示法

   它与hsl()的关系跟rgba()与rgb()之间的关系一样，都可以接受一个表示透明度的参数，用以设置颜色的透明程度。

   .box {
   	background-color: hsla( 74, 64%, 59%, 0.5 );
   }
   

透明度

除了前面介绍的rgba()和hsla()可以设置透明度，CSS也提供了另一种方式来控制透明度，那就是opacity属性：

.box {
	background-color: #bada55;
	opacity: 0.5;
}

opacity设置的透明度与前面的例子的区别：

前面的例子只让背景颜色变得透明，而这里我们让整个元素都变透明，包括元素中包含的内容。

使用opacity把一个元素设置为透明后，将无法再让其子元素变得不那么透明。

最后，推荐一个颜色对比度参考网站：Contrast Rebellion，有助于选取不错的颜色对比度，使用户体验更好。