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编辑的草稿已提交给CSS W3C工作组.尽管这在很大程度上容易改变的状态下,该文件的当前版本意味着,在一定程度上不久的将来CSS将同时支持4位和8位十六进制RGBA符号.

注意:以下引用已删除不相关的块,并且在您阅读此内容时可能已对源进行了大量修改(如上所述,它是编辑器的草稿而非最终文档).
如果情况发生了很大变化,请发表评论让我知道,以便我可以更新这个答案!

§4.2.RGB十六进制表示法:#RRGGBB

a的语法<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颜色的未来意味着什么？

这意味着,假设这是没有完全从4级文档中删除,我们很快就可以定义我们的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).

Answer 2

在发布问题的增强功能后,我找到了答案.抱歉!

MS Excel帮助了!

只需将十六进制前缀添加到十六进制颜色值,即可添加具有与%值等效不透明度的Alpha.

(在rbga中,百分比不透明度表示为如上所述的小数)

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF

Answer 3

RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';

Answer 4

请参见http://www.w3.org/TR/css3-color/#rgba-color

这是不可能的,很可能是因为0xFFFFFFFF大于32位整数的最大值

Answer 5

Chrome 52+ 支持 alpha hex:

background: #56ff0077;

Answer 6

使用red，green，blue转换为RGBA：

background-color: rgba(red($color), green($color), blue($color), 0.2);

Answer 7

在 Sass 中，我们可以这样写：

background-color: rgba(#ff0000, 0.5);

正如在带有 alpha 通道的颜色的十六进制表示中所建议的那样？

Answer 8

如果您将所有颜色都保存在十六进制变量中，则可以使用以下 SCSS 代码：

首先，将此映射从 rgba - 不透明度值复制到十六进制代码：

    $opacity-to-hex: (
    0: '00',
    0.05: '0C',
    0.1: '19',
    0.15: '26',
    0.2: '33',
    0.25: '3F',
    0.3: '4C',
    0.35: '59',
    0.4: '66',
    0.45: '72',
    0.5: '7F',
    0.55: '8C',
    0.6: '99',
    0.65: 'A5',
    0.7: 'B2',
    0.75: 'BF',
    0.8: 'CC',
    0.85: 'D8',
    0.9: 'E5',
    0.95: 'F2',
    1: 'FF'
)

然后复制以下使用映射的 mixin：

@mixin color-opacity($property, $color, $opacity) {
    #{$property}: unquote($color + map-get($opacity-to-hex, $opacity));
}

最后但并非最不重要的一点是，您可以将此 mixin 与所有颜色属性上的映射不透明度一起使用，例如：

@include color-opacity('background-color', $your_hex_color, 0.8);
@include color-opacity('color', $your_hex_color, 0.5);

Answer 9

我担心这是不可能的.rgba你知道的格式是唯一的格式.

Answer 10

如果你可以使用LESS,则有一个淡入淡出功能.

@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);

background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); 

// result: 
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));