Question

最近观察到（意外）Firefox（我正在使用v49）将4位十六进制颜色解析为rgba。阅读CSS spec，我没有看到任何对此的支持，也无法在MDN上找到任何记录它作为功能的内容。有人可以解释一下吗？

.content {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #999;
  text-align: center;
  position: relative;
}
.overlay {
  position: absolute;
  background-color: #f5f5;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<div class="content">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" />
  <div class="overlay"></div>
</div>

Answer 1

这是legit：

颜色可以在红绿蓝-α模型（RGBa）中定义为两种   方法：

十六进制表示法#RRGGBBAA和#RGBA


“＃”，后跟八个十六进制字符（0-9，A-F），其中前两位数字代表红色部分，第二位数字代表绿色   第二部分是蓝色部分，后两部分是透明度。

“＃”，后跟四个十六进制字符（0-9，A-F），其中第一个数字代表红色部分，第二个数字代表绿色部分，   第三个是蓝色部分，最后一个是透明度。该   四位RGB表示法（#RGBA）和八位数表格（#RRGGBBAA）   例如，＃f038和＃ff003388表示相同的颜色。

Chrome 52，Firefox 49，Opera 39和Safari 9.1支持它

Answer 2

这是Color level 4的新功能（这就是为什么它不会出现在第3级）并确实在Firefox 49中发货：

8位
  前6位数字的解释与6位数字符号相同。最后一对数字，解释为十六进制数字，指定颜色的alpha通道，其中00表示完全透明的颜色，ff表示完全不透明的颜色。

4位
  这是8位数字符号的较短变体，＆＃34;扩展＆＃34;与3位数表示法相同。第一个数字，解释为十六进制数，指定颜色的红色通道，其中0表示最小值，f表示最大值。接下来的三个数字分别代表绿色，蓝色和alpha通道。

Firefox将4位十六进制颜色值解析为rgba

2 个答案: