CSS十六进制RGBA？

Question

我知道你会写…

 background-color: #ff0000;

…如果你想要红色的东西。

你可以写…

 background-color: rgba(255, 0, 0, 0.5);

…如果你想要红色和半透明的东西。

有没有用十六进制写部分透明颜色的简洁方法？我想要类似的东西：

 background-color: #ff000088; <--- the 88 is the alpha

… 或者 …

 background-color: #ff0000 50%;

我将所有颜色都设为十六进制，并且必须将它们全部转换为十进制 0-255 比例尺很烦人。

原文由 Li Haoyi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS Color Module Level 4 可能会 支持 4 位和 8 位十六进制 RGBA 表示法！

三周前（2014 年 12 月 18 日） CSS Color Module Level 4 编辑的草稿 被提交给 CSS W3C 工作组。尽管处于极易更改的状态，但文档的当前版本暗示在 不久 的将来 CSS 将同时支持 4 位和 8 位十六进制 RGBA 表示法。

注意：以下引述删掉了不相关的部分，并且在您阅读本文时来源可能已经过大量修改（如上所述，这是编辑草稿而非最终文档）。

如果情况发生了重大变化，请发表评论让我知道，以便我更新此答案！

§ 4.2。 RGB 十六进制符号：#RRGGBB

<hex-color> 的语法是一个 <hash-token> 标记 ，其值由 3、4、6 或 8 个十六进制数字组成。换句话说，十六进制颜色被写为哈希字符“#”，后跟一些数字 0-9 或字母 a-f （字母的大小写无关紧要） - #00ff00 等同于 #00FF00 ）。

8位

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

示例 3

换句话说， #0000ffcc 代表与 rgba(0, 0, 100%, 80%) 相同的颜色（略微透明的蓝色）。

4位数

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

这对 CSS 颜色的未来意味着什么？

这意味着假设这没有从 Level 4 文档中完全删除，我们很快就能在支持 Color 的浏览器中以十六进制格式定义我们的 RGBA 颜色（或 HSLA 颜色，如果你是 其中 之一）模块级别 4 的语法。

例子

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

我什么时候可以在面向客户的产品中使用它？

撇开所有的笑话： 目前只是 2015 年的开始，因此在相当长的一段时间内，任何浏览器都不会支持这些 - 即使您的产品仅设计用于最新的浏览器，您可能不会很快在生产浏览器中看到这一点。

查看当前浏览器对#RRGGBBAA 颜色表示法的支持

然而，也就是说，CSS 的工作方式意味着我们今天就可以真正开始使用它们了！如果你真的想立即开始使用它们，只要你添加回退，任何不支持的浏览器都会简单地忽略新属性，直到它们被认为有效：

 figure {
  margin: 0;
  padding: 4px;

  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;

  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);

  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}

 <figure>Hello, world!</figure>

只要您在支持 background 和 color CSS 属性的浏览器上查看此答案，上述代码段的结果中的 <figure> 元素看起来与此非常相似：

在 Windows 上使用最新版本的 Chrome (v39.0.2171) 检查我们的 <figure> 元素，我们将看到以下内容：

6 位十六进制回退被 rgba() 值覆盖，我们的 8 位十六进制值被忽略，因为它们当前被 Chrome 的 CSS 解析器视为无效。只要我们的浏览器支持这些 8 位数的值，它们就会覆盖 rgba() 那些。

更新 2018-07-04： Firefox、Chrome 和 Safari 现在支持这种表示法，Edge 仍然缺失但可能会跟进（ https://caniuse.com/#feat=css-rrggbbaa ）。

原文由 James Donnelly 发布，翻译遵循 CC BY-SA 4.0 许可协议