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 比例很烦人。

Answer 1

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

三周前(2014 年 12 月 18 日) CSS Color Module Level 4 editor's draft 已提交给 CSS W3C 工作组。尽管处于极易发生变化的状态，但文档的当前版本暗示在某种不久的将来，CSS 将同时支持 4 位和 8 位十六进制 RGBA 表示法。

注意:以下引述删去了不相关的部分，并且在您阅读本文时来源可能已经过大量修改(如上所述，这是编辑草稿而非最终文档)。
如果情况发生重大变化，请发表评论让我知道，以便我更新此答案!

§ 4.2. The RGB hexadecimal notations: #RRGGBB

The syntax of a <hex-color> is a <hash-token> token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits 0-9 or letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00).

8 digits

The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where 00 represents a fully transparent color and ff represent a fully opaque color.

Example 3
In other words, #0000ffcc represents the same color as rgba(0, 0, 100%, 80%) (a slightly-transparent blue).

4 位数字

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

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

这意味着假设这没有从 Level 4 文档中完全删除，我们很快就能定义我们的 RGBA 颜色(或 HSLA 颜色，如果你是那些人中的一员) ) 在支持 Color Module Level 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 年初，因此在相当长的一段时间内，任何浏览器都不会支持这些 - 即使您的产品仅设计用于最先进的- 最新的浏览器，您可能不会在短期内在生产浏览器中看到这一点。

View current browser support for #RRGGBBAA color notation

然而，也就是说，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)。