CSS background-color属性

就color 这个单词就知道，

background-color

是设置背景颜色的。在CSS 中，它为背景容器设置纯色，这里的纯色指的是非渐变色。话说人靠衣装，马靠鞍。

background-color

让背景容器显得更加帅气。

background-color

属性的值有以下几种形式

系统定义的颜色名

HEX（十六进制）

rgb()/rgba()

hsl()/hsla()

transparent

系统定义的颜色名

比如：red、blue、black这些关键字就是系统定义的CSS颜色名，另外还有





其他颜色名请查看http://www.css88.com/book/css/appendix/color-keywords.htm#basic

其实我经常用的颜色就那么几类：white、black、blue、yellow、green、pink、yellowgreen、purple、tan、gray

比如：

background-color: white;
background-color: green;

HEX十六进制颜色

在网页上表示颜色一般用的是加法混色的RGB 模式，而这里要讲的十六进制颜色是RGB 模式的“变种”，就像是生物学上说的基因和性状表现的关系，同一个基因因为环境的差异会有不同的性状表现，所谓橘生南国为橘，生北国则为枳。RGB 加法模式是基因，而rgb() /rgba() 和HEX 十六进制是基因的不同表现形式。

平时生活中，我们接触的都是十进制数字，因为方便。如果我们要翻拍“花钱买饼”这部经典剧。

十进制版的是：我今天花了100 块钱，买了25 张饼

二进制版的是：我今天花了01100100 块钱，买了00011001 张饼。

八进制版的是：我今天花了O144 块钱，买了O31 张饼。

十六进制版的是：我今天花了0x64 块钱，买了0x19 张饼。

对于上述非十进制的数字表达，你是不是和我一样有种保证不打死他的冲动。日常生活中我们用十进制很合适,
b841
如果用其他进制表示生活中的数字，那我们只有哭晕在厕所了。

但是在其他领域可能用非十进制的更加容易应用，比如电路领域，关于位的操作，用二进制很合适。早期的以三为倍数的计算机（如12位）经常使用8进制，但现在以2为倍数的计算机（32位，64位）就不是很好用了，所以用的也不是很多。因为2进制表示一个很小的数都很长，所以就有了十六进制，一个十六进制数可以表示的数占二进制的4位，所以十六进制数可以很好地表示二进制，他们之间的转换非常容易。

说了一大堆，我没怎么听懂。那么，好，我们直奔主题。我们来探讨一下RGB 颜色值和十六进制颜色值是如何地下交易的。

RGB 模式的三原色是红（Red）、绿（Green）、蓝（Blue）。在CSS 中它们的值都是0~255（每个颜色都有28个值）。

比如：

rgb(255,255,255)

表示纯白;

rgb(0,0,0)

表示纯黑。

这里的0~255是数字的十进制，还记不记得上面蹩脚的十六进制表示法，比如:

十进制100 用十六进制表示就是161×6+160×4，即是64 。

十六进制大于等于10的位用a（十进制10）~f（十进制15）表示。



有图有真相，十六进制颜色是以”#”开头的，后面紧跟3对十六进制数字，第一对表示Red 颜色，第二位表示Green 颜色，第三对表示Blue 颜色。比如：

rgb(100,25,25)

变换成十六进制颜色就是#641919



另外，如果每对中的数值相同，则可以省略写成一个，比如：

#44aaff可以简写成：#4af

#cccccc可以简写成：#ccc

rgb()/rgba()颜色

就像上面说过的，rgb() 是加法混合，它的书写格式是这样的：

rgb(100,25,25);

其中第一个数字（100）表示Red 颜色，第二个数字（25）表示Green，第三个数字（25）表示Blue 颜色。数字越大（不超过255）则表示其对应的颜色加的越多。

你可能看到了，除了rgb() 外，还有rgba()。rgba() 是CSS 为rgb() 开的一个小灶，其中的a 表示Alpha 通道，表示不透明度。它就像是一个暗道，偷偷的偷走了RGB 的颜色，为了不偏袒，它会雨露均沾的偷（一个有道德的小偷）。a 的值为0~1之间的值，0表示全部偷走（透明色），1表示一点不偷（不透明），0.5表示每个（R、G、B）都偷走50%。比如：

rgba(100,25,25,0.5)

也可以这样写：

rgba(100,25,25,.5)

省略a 中0.5的0，只写.5

hsl()/hlsa()颜色

hsl() 是按照人类对颜色认知的习惯来生成的一种颜色表示法，H 表示色相，其值的范围是0~360，S 表示饱和度，其值范围是0~100%，L 表示亮度，其值范围是0~100%。色相就是纯色，其中

0/360表示红色

60表示黄色

120表示绿色

180表示青色

240表示蓝色

300表示品红色（紫色）

我的理解是：

饱和度表示纯色加灰度的量，加的灰越多饱和度越低，反之，加的灰越少则饱和度越高。S值为0%时颜色为灰色，100%时颜色最鲜艳，是纯颜色。。亮度表示纯色加白或加黑的量，加白亮度高，加黑亮度低。L值为0%时颜色为黑色；100%颜色为白色。

和rgba() 相似，hsla() 中的a 是Alpha 通道，表示不透明度,值为0到1。

比如：

hsl(120,30%,24%);
hsla(120,30%,24%,.3);

transparent

transparent 表示透明色，其相当于把rgba() 或hsla() 中的a值设置成0。利用

transparent

这个特性，可以做出各种意想不到的东西，不信你就试试。

背景颜色的范围

不像

background-image

有那么多的控制，

background-color

就

background-clip

能够控制，它的范围就是背景区域就是border-box区域，

background-origin

、

background-position

、

background-repeat

、

background-size

、和

background-attachment

都不能控制

background-color

。

原文链接