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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:16:12  来源:igfitidea点击:

Hex colors: Numeric representation for "transparent"?

csscolorstransparencyrgb

提问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 alphacomponent. 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 opacityproperty:

此外,我不知道它是否有帮助,但是,您可以设置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 digits 0-9or letters a-f(the case of the letters doesn't matter - #00ff00is 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 00represents a fully transparent color and ffrepresent a fully opaque color.

Example 3
In other words, #0000ffccrepresents the same color as rgba(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 0represents the minimum value and frepresents 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: enter image description here

大多数情况下,Chrome 和 Firefox 已经开始支持这个: 在此处输入图片说明

回答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=" "