CSS 除了“不透明度”之外,RGB 与 RGBA 之间有什么区别

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24538501/
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-30 02:40:14  来源:igfitidea点击:

What are differences between RGB vs RGBA other than 'opacity'

cssrgbargbrbga

提问by chris Frisina

I have moved beyond using standard colors in CSS by declaring them orange, blue, aquamarine, etc..., and have been using rgb()like so for the same colors respectively, rgb(255,165,0), rgb(0,0,255)and rgb(127,255,212)(thanks to the ColorHighlighterpackage in ST3).

我已经超越了在 CSS 中使用标准颜色的方式,通过声明它们orangeblueaquamarine等...,并且已经分别使用rgb()相同的颜色、rgb(255,165,0)rgb(0,0,255)rgb(127,255,212)(感谢ST3 中的ColorHighlighter包)。

Upon altering a gradient for bootstrap .btnI came across rgba(). Quick research explains that astands for alpha, and theres a whole bunch of integral math attributed to Catmulland Smith. It is also somewhat easy to find that the alpha channel is used for "alpha compositing", which can mostly be associated as "opacity".

在更改引导程序的渐变后,.btn我遇到了rgba(). 快速研究解释了这a代表alpha,并且有一大堆积分数学归因于 CatmullSmith。也很容易发现 alpha 通道用于“alpha 合成”,这主要可以与“不透明度”相关联。

  • Are there differences between the two other than opacity?
  • Why isn't it convention to use RGBA.(I'm assuming this since I am just now stumbling onto this)
  • Are there other limitations that should be know when using rgba() for the web?
  • Is there a shortcut to declare opacity beside a color shortcut? (ie color: salmon:.5;)
  • From a web developer standpoint, do I need to worry about the differences between ARGB, RGBA, BGRA byte order for different machines INFO?
  • Other important information?
  • 除了不透明度之外,两者之间还有区别吗?
  • 为什么不习惯使用 RGBA。(我假设这是因为我刚刚偶然发现了这个)
  • 在网络上使用 rgba() 时是否还有其他限制?
  • 在颜色快捷方式旁边是否有声明不透明度的快捷方式?(即 color: salmon:.5;
  • 从 Web 开发人员的角度来看,我是否需要担心不同机器INFO 的ARGB、RGBA、BGRA 字节顺序之间的差异?
  • 其他重要信息?

回答by Rich Remer

RGB is a 3-channel format containing data for Red, Green, and Blue. RGBA is a 4-channel format containing data for Red, Green, Blue, and Alpha.

RGB 是一种 3 通道格式,包含红色、绿色和蓝色的数据。RGBA 是一种 4 通道格式,包含红色、绿色、蓝色和 Alpha 的数据。

There is no use to the Alpha channel other than making the color transparent/opaque (or partially transparent; translucent).

除了使颜色透明/不透明(或部分透明;半透明)之外,Alpha 通道没有任何用处。

In CSS, rgb() had wide browser support for several years before rgba() received the same level of support. This is one reason you will find more rgb() in CSS than rgba(). The other reason is that translucency isn't something you typically use everywhere.

在 CSS 中,在 rgba() 获得相同级别的支持之前,rgb() 已获得广泛的浏览器支持多年。这就是你会在 CSS 中发现 rgb() 比 rgba() 多的原因之一。另一个原因是半透明不是你通常在任何地方使用的东西。

You might find an RGB value packed into 16 bits, with 5 bits for Blue and Red, and 6 bits for Green (green gets more bits because the eye is more discerning to shades of green). You might also find an RGBA value packed into 16 bits, with 5 bits for each color and 1 bit for alpha. With one bit, you can only make the color fully transparent or not transparent at all.

您可能会发现一个 RGB 值被打包成 16 位,其中 5 位用于蓝色和红色,6 位用于绿色(绿色获得更多位,因为眼睛对绿色阴影更具有辨别力)。您可能还会发现一个 RGBA 值打包成 16 位,每种颜色 5 位,alpha 1 位。使用一位,您只能使颜色完全透明或根本不透明。

Typically nowadays, you'll find RGB and RGBA packed into 32 bit values, with 8 bits for each color, and 8 bits for alpha (or left blank for RGB).

现在,您通常会发现 RGB 和 RGBA 被打包成 32 位值,每种颜色 8 位,alpha 8 位(或 RGB 留空)。

In CSS, the designers decided to use values 0-255 (the range for an 8 bit value) for the Red, Green, and Blue, but they use a value between 0.0 and 1.0 for the Alpha channel. The actual byte format for the color is irrelevant to web developers.

在 CSS 中,设计人员决定对红色、绿色和蓝色使用 0-255(8 位值的范围)值,但对 Alpha 通道使用介于 0.0 和 1.0 之间的值。颜色的实际字节格式与 Web 开发人员无关。

In my experience, neither rgb() nor rgba() are used very often in CSS. Hex colors are way more dominant, and predated them by several more years.

根据我的经验, rgb() 和 rgba() 在 CSS 中都不经常使用。十六进制颜色更占主导地位,并且比它们早了几年。

HSL is actually a much better format for working with colors and is supported in CSS (IE9+, Firefox, Chrome, Safari, and in Opera 10+.).

HSL 实际上是一种更好的颜色处理格式,并且在 CSS(IE9+、Firefox、Chrome、Safari 和 Opera 10+)中受支持。

http://www.w3schools.com/cssref/css_colors_legal.asp

http://www.w3schools.com/cssref/css_colors_legal.asp

回答by NathanZNeitman

RGBis standard rgb colors, you already understand this.

RGB是标准的 rgb 颜色,你已经明白了。

RGBais standard rgb colors, but with the alpha/opacity also.

RGBa是标准的 rgb 颜色,但也带有 alpha/opacity。

Other than that there isn't any difference, colors still code the same.

除此之外没有任何区别,颜色仍然编码相同。

Problem with using this and other CSS3color styles is that it isn't always supported. Here is a linkI found that tells you which versions of browsers support it.

使用这种和其他CSS3颜色样式的问题是它并不总是受支持。这是我找到的一个链接,它告诉您哪些版本的浏览器支持它。

Declaring alphain CSSwould look like this rgba(0, 0, 0, .3)with the alpha being a decimal or integer from 1to 0. 1 being opaque and 0 being completely transparent.

CSS 中声明alpha看起来像这样rgba(0, 0, 0, .3)alpha 是一个十进制或从10 的整数。1 表示不透明,0 表示完全透明。

回答by remixdesign

rgbis standard rgbvalues (red, green, blue)

rgb是标准rgb(red, green, blue)

rgbais standard rgbvalues (red, green, blue + Alpha (aka opacity))

rgba是标准rgb(red, green, blue + Alpha (aka opacity))

You will not find any color variations. RGBAis a css3color property.

您不会发现任何颜色变化。RGBAcss3颜色属性。

As older browser support may be limited, you may want to use a fallback color as such:

由于旧版浏览器支持可能有限,您可能希望使用后备颜色:

CSS:

CSS:

div {    
  background-color: rgb(200, 54, 54); /*The Fallback*/
  background-color: rgba(200, 54, 54, 0.5) !important; 
}