Hex色彩代码: "透明"的数字表示方法是什么?

53

我正在构建一个 Web 内容管理系统,在其中用户可以选择某些站点元素的颜色。我希望将所有颜色值都转换为十六进制,以避免任何进一步的格式化麻烦("rgb(x,y,z)" 或命名颜色)。我已经找到了一个好的 JS 库来完成此任务。

唯一无法转换为十六进制的是 "transparent"。当明确声明元素为透明时,我需要使用该功能,这在我的经验中可能与未定义任何值是不同的。

有人知道是否可以将其转换为某些数字形式吗?我是否必须设置所有处理实例以接受十六进制值 或者 "transparent"?我想不出其他方法。


您可以查看我的答案以获取纯**#HEX**透明解决方案。 - Jomar Sevillejo
8个回答

52

HEXA - #RRGGBBAA

有一种相对较新的实现透明度的方法,它被称为HEXA(HEX + Alpha)。它包含8个数字而不是6个。最后一对数字表示Alpha值。因此,数字对的模式是#RRGGBBAA。4个数字也可以使用:#RGBA

目前我不确定它在浏览器中的支持情况,但您可以查看草案文档以获取更多信息。

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

<hex-color>的语法是由3、4、6或8个十六进制数字组成的<hash-token>标记。换句话说,十六进制颜色写作井字符号“#”后跟一些数字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 通道。

目前,Chrome 和 Firefox 大部分已开始支持此功能:enter image description here


2
#0000ffcc 在微软 Edge 中似乎无法识别。 - techie_28

45

透明度是颜色本身外在的一个属性,也称为 alpha 组件。你不能将纯 RGB(即红绿蓝通道)编码为透明度,但可以使用 RGBA 表示法,其中你可以同时定义颜色和透明度通道:

color: rgba(255, 0, 0, 0.5); /* red at 50% opacity */

如果您想要“透明”,只需将最后一个数字设置为0,无论颜色如何。即使将颜色部分分别设置为100%的红色、绿色和蓝色,以下所有内容都会得到“透明”:

color: rgba(255, 0, 0, 0); /* transparent */
color: rgba(0, 255, 0, 0); /* transparent */
color: rgba(0, 0, 255, 0); /* transparent */

现在主流浏览器都支持HEXA表示法(或RRGGBBAA),它与RGBA基本相同,但使用十六进制表示而不是十进制:

color: #FF000080; /* red at 50% opacity */

此外,如果你只想要一个透明的背景,最简单的方法是:

background: transparent;

你也可以尝试使用opacity,不过这可能会对你的情况产生一些副作用,所以要慎重考虑:

.half {
  opacity: 0.5;
  filter: alpha(opacity=50); /* needed to support IE, my sympathies if that's the case */
}

是的,通常情况下是这样的。然而,CSS实现中有些情况下我被迫使用“color: transparent”,例如背景颜色。因此我的问题。 - Pekka
我在思考是否可能存在一种类似 GIF 格式中的“alpha颜色”。但我从来没有听过 HTML 中有这样的东西。 - Pekka
有一个叫做不透明度的属性。但它不是跨浏览器的。我现在已经编辑了我的答案,请看那里。 - Seb
不透明度现在在所有主要浏览器中得到支持。 - here
1
这个答案中嵌入了一个被低估的笑话。 - Pyromonk
如果您需要从十六进制中获取透明度,您可以查看我下面的答案。 - Jomar Sevillejo

36

Alpha通道定义了颜色的透明度值,所以只要alpha值为0,任何颜色都是100%透明的。通常这种四通道颜色类型被称为RGBA。

您可以在CSS中像这样指定RGBA:

div {
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

请注意,并非所有浏览器都支持RGBA,如果不支持,您可以指定一个备用方案

div {
    background: rgb(200, 54, 54); /* fallback */
    background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}

你可以在这里获取有关浏览器支持和解决方法的更多信息。


哦,有趣!你知道这个是否跨浏览器安全吗? - Pekka
非常好,我不知道这个,谢谢。然而只要它没有得到广泛支持,我仍然需要使用“透明”来解决问题。我会记住这个,并在3-4年后再次检查,当浏览器环境发生变化时。 - Pekka
1
唉,IE7和8在3-4年内不会消失! - FelipeAls

5
你可以使用这个转换表:http://roselab.jhu.edu/~raj/MISC/hexdectxt.html 例如,如果您想要60%的透明度,则使用3C(十六进制等效)。
这对于IE背景渐变透明度非常有用:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454)";

其中startColorstr和endColorstr: 前2个字符是透明度的十六进制值,后面6个字符是颜色的十六进制值。


链接对我来说是坏的 :( - Ralph David Abernathy

3

有两种常见的方法:一种是将特定颜色定义为“透明”,这样,您不能在图像中使用该颜色而不使其变成透明;另一种方法是在红、绿、蓝三个通道旁边定义第四个通道,称为“alpha”,它表示半透明/透明度。


1
非常简单:没有颜色,没有透明度:

rgba(0, 0, 0, 0);

0

使用以下十六进制代码设置透明文本颜色:#00FFFF00


-6

我也在尝试透明度 - 也许你可以尝试将背景值留空,例如:

bgcolor=" "

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接