CSS中background-color属性（二）

2019独角兽企业重金招聘Python工程师标准>>>

3. 十六进制表示法

红色：

 

1 background-color: #ff0000;

所有用#开头的值，都是16进制的。

#ff0000

16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。

ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

怎么换算呢，这里我们来介绍一下

我们现在看一下10进制中的基本数字（一共10个）:

0、1、2、3、4、5、6、7、8、9

 

16进制中的基本数字（一共16个）:

0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

16进制对应表：

十六进制中，13 这个数字表示什么？

表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。

如： 

16进制中的2b等于10进制多少？

答：2*16+11 = 43。

所以，#ff0000就等于rgb(255,0,0)

 

1 background-color: #123456;

等价于：

1 background-color: rgb(18,52,86);

 

所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量，一样。

 

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;

比如：

1 background-color:#ff0000;

等价于

1 background-color:#f00;

 

比如：

1 background-color:#112233;

等价于

1 background-color:#123;

 

只能上面的方法简化，比如

1 background-color:#222333;

无法简化！

再比如

1 background-color:#123123;

无法简化！

 

要记住：

1 #000   黑 2 #fff    白 3 #f00   红 4 #333   灰 5 #222   深灰 6 #ccc   浅灰

 

 

 

转载于:https://my.oschina.net/u/2971691/blog/868356