CSS 十六进制颜色:“透明”的数字表示?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1751263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hex colors: Numeric representation for "transparent"?
提问by Pekka
I am building a web CMS in which the user can choose colours for certain site elements. I would like to convert all colour values to hex to avoid any further formatting hassle ("rgb(x,y,z)" or named colours). I have found a good JS library for that.
我正在构建一个 Web CMS,用户可以在其中为某些站点元素选择颜色。我想将所有颜色值转换为十六进制以避免任何进一步的格式化麻烦(“rgb(x,y,z)”或命名颜色)。我为此找到了一个很好的 JS 库。
The only thing that I can't get into hex is "transparent". I need this when explicitly declaring an element as transparent, which in my experience can be different from not defining any value at all.
我唯一无法进入十六进制的是“透明”。当明确声明一个元素为透明时,我需要这个,根据我的经验,这可能与根本不定义任何值不同。
Does anybody know whether this can be turned into some numeric form? Will I have to set up all processing instances to accept hex values or"transparent"? I can't think of any other way.
有谁知道这是否可以变成某种数字形式?我是否必须将所有处理实例设置为接受十六进制值或“透明”?我想不出别的办法。
采纳答案by Seb
Transparency is a property outside the color itself, also known as alpha
component. You can't code it as RGB.
透明度是颜色本身之外的属性,也称为alpha
组件。您不能将其编码为 RGB。
If you want a transparent background, you can do this:
如果你想要一个透明的背景,你可以这样做:
background: transparent;
Additionally, I don't know if it might be helpful or not but, you could set the opacity
property:
此外,我不知道它是否有帮助,但是,您可以设置opacity
属性:
.half{
opacity: 0.5;
filter: alpha(opacity=50);
}
You need both in order to get it working in IE and all other decent browsers.
你需要两者才能让它在 IE 和所有其他像样的浏览器中工作。
回答by Jomar Sevillejo
HEXA - #RRGGBBAA
六边形 - #RRGGBBAA
There's a relatively new way of doing transparency, it's called HEXA(HEX + Alpha). It takes in 8 digits instead of 6. The last pair is Alpha. So the pattern of pairs is #RRGGBBAA. Having 4 digits also works: #RGBA
有一种相对较新的透明方式,称为HEXA(HEX + Alpha)。它需要 8 位数字而不是 6 位数字。最后一对是 Alpha。所以对的模式是#RRGGBBAA。有 4 位数字也有效:#RGBA
I am not sure about its browser support for now but, you can check the DRAFT Docsfor more information.
我现在不确定它的浏览器支持,但是,您可以查看DRAFT Docs以获取更多信息。
§4.2. The RGB hexadecimal notations: #RRGGBB
The syntax of a
<hex-color>
is a<hash-token>
token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, "#", followed by some number of digits0-9
or lettersa-f
(the case of the letters doesn't matter -#00ff00
is identical to#00FF00
).8 digits
The first 6 digits are interpreted identically to the 6-digit notation. The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where
00
represents a fully transparent color andff
represent a fully opaque color.Example 3
In other words,#0000ffcc
represents the same color asrgba(0, 0, 100%, 80%)
(a slightly-transparent blue).4 digits
This is a shorter variant of the 8-digit notation, "expanded" in the same way as the 3-digit notation is. The first digit, interpreted as a hexadecimal number, specifies the red channel of the color, where
0
represents the minimum value andf
represents the maximum. The next three digits represent the green, blue, and alpha channels, respectively.
§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 通道。
For the most part, Chrome and Firefox have started supporting this:
回答by fbrereto
The alpha channel defines the transparency value of a color, so any color is 100% transparent as long as the alpha value is 0. Typically this four-channel color type is known as RGBA.
Alpha 通道定义颜色的透明度值,因此只要 Alpha 值为 0,任何颜色都是 100% 透明的。通常,这种四通道颜色类型称为 RGBA。
You can specify RGBA in CSS like so:
您可以像这样在 CSS 中指定 RGBA:
div {
background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}
Note that not all browsers support RGBA, in which case you can specify a fallback:
请注意,并非所有浏览器都支持 RGBA,在这种情况下,您可以指定回退:
div {
background: rgb(200, 54, 54); /* fallback */
background: rgba(200, 54, 54, 0.5); /* 50% transparent */
}
More information regarding browser support and workarounds can be found here.
可以在此处找到有关浏览器支持和解决方法的更多信息。
回答by Idealmind
You can use this conversion table: http://roselab.jhu.edu/~raj/MISC/hexdectxt.html
你可以使用这个转换表:http: //roselab.jhu.edu/~raj/MISC/hexdectxt.html
eg, if you want a transparency of 60%, you use 3C (hex equivalent).
例如,如果您想要 60% 的透明度,则使用 3C(等效十六进制)。
This is usefull for IE background gradient transparency:
这对于 IE 背景渐变透明度很有用:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3C545454, endColorstr=#3C545454)";
where startColorstr and endColorstr: 2 first characters are a hex value for transparency, and the six remaining are the hex color.
其中 startColorstr 和 endColorstr: 前 2 个字符是透明度的十六进制值,其余六个是十六进制颜色。
回答by qid
There are two common approaches for this: either reserve a specific color as being "transparent," in which case you cannot use that color in images without it appearing transparent, or define a fourth channel alongside red, green, and blue called "alpha" which indicates translucency/transparency.
有两种常见的方法:要么将特定颜色保留为“透明”,在这种情况下,您不能在图像中使用该颜色而不显示它是透明的,或者在红色、绿色和蓝色旁边定义第四个通道,称为“alpha”表示半透明/透明。
回答by drjorgepolanco
Very simple: no color, no opacity:
很简单:没有颜色,没有不透明度:
rgba(0, 0, 0, 0);
回答by Gourav Yadav
Use following hexadecimal code for transparent text colour: #00FFFF00
对透明文本颜色使用以下十六进制代码:#00FFFF00
回答by Row
I was also trying for transparency - maybe you could try leaving blank the value of background e.g. something like
我也在尝试透明度 - 也许你可以尝试将背景值留空,例如
bgcolor=" "