十六进制颜色:"透明"的数字表示？

Question

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

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

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

Answer 1

HEXA - #RRGGBBAA

有一种相对较新的透明方式,它叫做HEXA(HEX + Alpha).它需要8位而不是6位.最后一对是Alpha.所以对的模式是#RRGGBBAA.有4位数也有效:#RGBA

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

§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通道.

在大多数情况下,Chrome和Firefox已经开始支持:

Answer 2

透明度是颜色本身之外的属性,也称为alpha组件.您无法将其编码为RGB.

如果您想要透明背景,可以这样做:

background: transparent;

另外,我不知道它是否有用,但你可以设置opacity属性:

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

你需要两者才能让它在IE和其他所有体面的浏览器中运行.

Answer 3

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

有关浏览器支持和解决方法的更多信息,请访问此处.

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个第一个字符是透明度的十六进制值,其余六个是十六进制颜色.