对background-color的标准值的一点研究

[dudy5]

我去年年底的时候有过对background-color值的转换的研究，当时随手将其放在了codepen上，今天有时间，将其整理成文如下：

我们平时书写CSS时有没有想过我写出来的值，他最终转换出来的值跟你写的是一样，在CSS中，有很多这种不一样，background-color就是其中之一。下面我们依次来看看当使用不同的原始值时，转换值是什么(IE8及其以上浏览器)。

---

原始值：#FF0000

HTML:

 <div class="m-demo m-demo1">哈哈哈哈哈哈哈哈哈哈</div>

CSS:

.m-demo1{
  background-color:#FF0000;
}

浏览器最终生成的background-color computed计算值为rgb(255, 0, 0)，此时background-color是在外部样式表中定义的，采用的十六进制值

各浏览器差异：IE系列除了IE8的生成值格式是对应设置的格式#ff0000外（大小写值得到了转换，本来是大写的#FF0000），其它的生成的都是rgb(255,0,0)

---

原始值：rgb(255, 0, 0)

HTML:

<div class="m-demo m-demo2">哈哈哈哈哈哈哈哈哈哈</div>

CSS:

.m-demo2{
  background-color:rgb(255, 0, 0);
}

包括IE8在内的所有浏览器最终生成的background-color computed计算值为rgb(255, 0, 0)，此时background-color是在外部样式表中定义的，采用的值是rgb(255, 0, 0)

---

原始值：red

HTML:

<div class="m-demo m-demo3">哈哈哈哈哈哈哈哈哈哈</div>

CSS:

.m-demo3{
  background-color:red;
}

浏览器最终生成的background-color computed计算值为rgb(255, 0, 0)，此时background-color是在外部样式表中定义的，采用的值是red。
IE8生成的是red值

---

原始值：rgba(255, 0, 0, 1)

HTML:

<div class="m-demo m-demo4">哈哈哈哈哈哈哈哈哈哈</div>

CSS:

.m-demo4{
  background-color:rgba(255, 0, 0, 1);
}

谷歌和火狐生成的值都是rgb(255, 0, 0)，而现代IE（包括IE11、IE10、IE9，另外，IE8不支持rgba值，生成的是transparent，不在讨论范围）生成的都是rgba(255, 0, 0 ,1)

---

原始值：rgba(255, 0, 0, 0.6)

HTML:

<div class="m-demo m-demo5">哈哈哈哈哈哈哈哈哈哈</div>

CSS:

.m-demo5{
  background-color:rgba(255, 0, 0, 0.6);
}

除了不支持rgba值的IE8生成的transparent之外，对于rgba的a值小于1的情况，各主流浏览器保持一致，生成的都是rgba(255, 0, 0, 0.6)值

---

原始值：hsl(0,100%,50%)

HTML:

<div class="m-demo m-demo6">哈哈哈哈哈哈哈哈哈哈</div>

CSS:

.m-demo6{  
  background-color:hsl(0,100%,50%);
}

除了不支持hsl色的IE8只外，其它的生成的都是rgb(255, 0, 0)值

---

原始值：hsla(0,100%,50%,1)

HTML:

<div class="m-demo m-demo7">哈哈哈哈哈哈哈哈哈哈</div>

CSS:

.m-demo7{  
  background-color:hsla(0,100%,50%,1);
}

IE8除外，包括IE9、10、11在内的IE浏览器生成的是rgba(255,0,0,1)，而chrome和火狐生成的则是rgb(255, 0, 0)值

---

原始值：hsla(0,100%,50%,0.6)

HTML:

<div class="m-demo m-demo8">哈哈哈哈哈哈哈哈哈哈</div>

CSS:

.m-demo8{  
  background-color:hsla(0,100%,50%,0.6);
}

除了不支持hsla值的IE8生成的是transparent值只外，其它各主流浏览器生成的都是rgba(255, 0, 0, 0.6)值

---

原始值：transparent

HTML:

<div class="m-demo m-demo9">哈哈哈哈哈哈哈哈哈哈</div>

CSS:

.m-demo9{  
  background-color:transparent;
}

除了chrome生成的是rgba(0, 0, 0, 0)值之外，其它的主流浏览器包括IE8生成的都是transparent值

---

原始值:background-color: rgba(0, 0, 0, 0.5)

在chrome中，当值为rgba(0,0,0,0.5)时，解析出来的值为rgba(0, 0, 0, 0.498039)，这是一种特殊的情况，具体可参见一丝老师的文章有趣的 CSS Alpha 值

---

总结：

通过以上解析的结果可以发现，解析后的值中，rgb值是最多的，rgba值次之，因此，我们有理由认为，rgb值是应该采用的标准background-color值，因为其大多数情况下无需二次解析，效率最高。
TIP:color值的解析也是差不多的，对于color的标准值，也应是rgb()