CSS十六进制RGBA?

我知道你能写…

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的十进制刻度，这很烦人。

301826 次浏览
小开

恐怕不行。你所知道的rgba格式是唯一的。

小开

看这里http://www.w3.org/TR/css3-color/#rgba-color

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

小开 
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+')';
小开
好吧，不同的颜色符号是你要学习的。
Kuler给你一个更好的机会找到颜色和多种符号。
十六进制与RGB没有区别，FF = 255和00 = 0，但这是你知道的。所以在某种程度上，你必须把它形象化。
我使用Hex, RGBA和RGB。除非需要大量转换，否则手动这样做将帮助您记住一些奇怪的100种颜色及其代码。
要进行大规模转换，请编写一些类似Alarie所给出的脚本。

小开

我在对问题进行增强后找到了答案。对不起!

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
小开

为什么不使用 <代码> background - color: # ff0000; 透明度:0.5; 过滤器:α(不透明度= 50);/ /code>

如果您为文本或元素指定颜色，这应该容易得多。

小开

白马王子:

只有ie浏览器允许ARGB格式的4字节十六进制颜色，其中A是Alpha通道。它可以用于渐变过滤器，例如:

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";
其中dir可以是:1(水平)或0(垂直) 颜色字符串可以是十六进制颜色(#FFAAD3)或argb十六进制颜色(#88FFAAD3)
小开

CSS颜色模块4级将可能支持4和8位十六进制RGBA符号!

三周前(2014年12月18日)，CSS颜色模块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表示完全不透明的颜色。

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

4位数

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

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

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

例子

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>

As long as you're viewing this answer on a browser which supports the background and color properties in CSS, the <figure> element in result of the above snippet will look very similar to this:

Code Snippet Result Image

Using the most recent version of Chrome on Windows (v39.0.2171) to inspect our <figure> element, we'll see the following:

Element Inspector Example

The 6-digit hexadecimal fall back is overridden by the rgba() values, and our 8-digit hexadecimal values are ignored as they are currently deemed invalid by Chrome's CSS parser. As soon as our browser supports these 8-digit values, these will override the rgba() ones.

UPDATE 2018-07-04: Firefox, Chrome and Safari are support this notation now, Edge still missing but will probably follow (https://caniuse.com/#feat=css-rrggbbaa).

小开

如果你可以使用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));
小开

#rrggbbaa符号在Chrome 62+和所有其他常青树浏览器中完全支持:

background: #56ff0077;
小开

Sass有red， green， blue可以从十六进制颜色中提取通道:

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

Sass也有rgba($hex_color, $alpha)

小开

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

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

正如在用alpha通道的颜色的十六进制表示?中建议的那样

小开

如果你所有的颜色都在HEX变量中，你可以使用下面的SCSS代码:

首先，将这个映射从rgba - opacity值复制到十六进制代码:

    $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);
小开

在伪元素之后使用an:怎么样?

#myDiv{
position: relative;
width: 128px;
height: 128px;
background-color: #ccc;
}


#myDiv:after{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
  

/* here you go */
margin: -8px;
border: solid 8px #00f;
opacity: 0.2;
}
<div id="myDiv">hello world!</div>


提交答案