十六进制颜色：“透明”的数字表示？

Question

我正在构建一个Web CMS，用户可以在其中为某些网站元素选择颜色。 我想将所有颜色值转换为十六进制，以避免任何进一步格式化麻烦（“rgb（x，y，z）”或命名颜色）。我找到了一个很好的JS库。

我唯一不能进入十六进制的是“透明”。我明确地将一个元素声明为透明时需要这个，根据我的经验，这可能与根本没有定义任何值有所不同。

有人知道这是否可以变成某种数字形式？我是否必须设置所有处理实例以接受十六进制值或“透明”？我想不出任何其他方式。

Answer 1

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 */
}

有关浏览器支持和解决方法的更多信息，请访问here。

Answer 2

HEXA - #RRGGBBAA

有一种相对较新的透明度方式，它被称为 HEXA （HEX + Alpha）。它需要8位而不是6位。最后一对是Alpha。所以对的模式是 #RRGGBBAA 。有4个数字也有效： #RGBA

我现在不确定它的浏览器支持，但您可以查看 DRAFT Docs 以获取更多信息。

  

§ 4.2。 RGB十六进制表示法：#RRGGBB

     

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

     

8位

     

前6位数字的解释与6位数字符号相同。最后一对数字（解释为十六进制数字）指定颜色的Alpha通道，其中#00FF00表示完全透明的颜色，00表示完全不透明的颜色。

     

    

示例3
换句话说，ff表示与#0000ffcc相同的颜色（略微透明的蓝色）。

  

     

4位

     

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

在大多数情况下，Chrome和Firefox已开始支持此功能：

Answer 3

透明度是颜色本身之外的属性，也称为alpha组件。你不能把它编码为RGB。

如果您想要透明背景，可以这样做：

background: transparent;

此外，我不知道它是否有用，但您可以设置opacity属性：

.half{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

你需要两者才能让它在IE和所有其他不错的浏览器中运行。

Answer 4

您可以使用此转化表：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个第一个字符是透明度的十六进制值，其余六个是十六进制颜色。

Answer 5

有两种常见的方法：将特定颜色保留为“透明”，在这种情况下，如果图像不显示透明，则不能使用该颜色，或者在红色，绿色和蓝色旁边定义第四个通道“alpha”表示半透明/透明度。

Answer 6

非常简单：没有颜色，没有不透明性：

rgba(0, 0, 0, 0);

Answer 7

将以下十六进制代码用于透明文本颜色：＃00FFFF00

Answer 8

我也在尝试提高透明度 - 也许你可以尝试将背景值保留为空白，例如

之类的东西

bgcolor=" "