8 位十六进制代码?

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!

奇怪吧? 4 位十六进制代码也是如此。 它们是将 Alpha 透明度信息放入颜色的十六进制格式的一种方法。 如果您使用 Chrome,您可能会突然看到更多,因为它 在 52 版本中推出,并且 DevTools 似乎默认以这种格式显示 Alpha 透明颜色,即使您最初使用其他方法设置它也是如此。

Firefox 也支持它,仅供参考。

让我们看看它是如何工作的

.element {

  /* This is green */
  background: rgb(0, 255, 0);

  /* It's the same as this */
  background: #00ff00;

  /* We could make it 50% transparent like this */
  background: rgba(0, 255, 0, 0.5);

  /* Or, with an alpha hex like this */
  background: #00ff0080;

}

最后两位数字代表 Alpha 透明度。 但是等等……最后两位数字是“80”,而不是“50”。 我们稍后会解释。

首先,请记住三位十六进制数是如何工作的?

.element {

  /* This */
  background: #900;

  /* Is the same as this */
  background: #990000;

}

它是每个数字加倍。 4 位数字也是一样的。

.element {

  /* This */
  background: #0f08;

  /* Is the same as this */
  background: #00ff0088;

}

这些格式有时被称为 #RRGGBBAA 和 #RGBA。

AA 部分是 0-100 的十六进制表示,例如

0 = 00
1 = 03
2 = 05

9 = 17

10 = 1A
11 = 1C
12 = 1F

99 = FC
100 = FF

这就是为什么“80”在上面的示例中实际上是“50% 透明度”的原因。

此外,这里有一个我从 这里 改编的图表

查看 Chris Coyier 在 CodePen 上的 Pen XjbzAW (@chriscoyier)。

您应该使用它吗?

可能不。 它目前支持得不太好,并且与 rgba()hsla() 相比没有优势,除了,我想,节省了一点点字节。