CSS 透明色与 rgba(0,0,0,0)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/28294791/
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
Transparent color vs rgba(0,0,0,0)
提问by sdvnksv
Is there any major advantage to use:
使用有什么主要优点:
background-color: rgba(0,0,0,0);
instead of:
代替:
background-color: transparent;
?
?
采纳答案by Luca Detomi
Behaviour is exactly the same, but transparent
is compatible also with IE8.
RGBA
is more advanced (but lacks IE8 support) and allows you to quickly modify it, in case you would like an "almost transparent" color, without need to completely change attribute.
行为完全相同,但transparent
也与 IE8 兼容。
RGBA
更高级(但缺乏 IE8 支持)并允许您快速修改它,以防您想要“几乎透明”的颜色,而无需完全更改属性。
For example, it could be very quick to set
例如,设置可能非常快
background-color: rgba(0,0,0,0.1);
Due to default behaviour of browsers that ignored unrecognized properties, is possible to combine them in order to use new one in newer browsers, but leave a fallback for older ones, simply typing both of them:
由于浏览器的默认行为会忽略无法识别的属性,因此可以将它们组合起来以便在较新的浏览器中使用新的,但为旧的浏览器留下后备,只需键入它们:
background-color: transparent;
background-color: rgba(0,0,0,0);
Or, more useful, in case of alreasy cited almost transparentbackgrounds, you can write:
或者,更有用的是,如果引用几乎透明的背景,你可以这样写:
background-color: transparent;
background-color: rgba(0,0,0,0.1);
New browsers will set rgba(0,0,0,0.1)
as background, overriding previous transparent
declaration, but IE8 will set transparent
as background, because it will ignore unrecognized rgba()
value, so a slightly different result but in according to Graceful Degradationprinciple.
新的浏览器会设置rgba(0,0,0,0.1)
为背景,覆盖之前的transparent
声明,但 IE8 会设置transparent
为背景,因为它会忽略无法识别的rgba()
值,所以结果略有不同,但根据Graceful Degradation原则。
回答by BobDCoder
To Note: background_color: rgba(0,0,0,0.0);
would be more accurate but the same. As stated background_color: transparent;
would be supported in older browsers.
注意:background_color: rgba(0,0,0,0.0);
会更准确,但相同。如前所述background_color: transparent;
,旧浏览器将支持。
Using the background_coloris not the issue as it is used universally in both indicators. The issue of question is in the assignment of transparent-vs- rgba.
使用background_color不是问题,因为它在两个指标中都普遍使用。问题在于透明-vs- rgba的分配。
transparent- obviously sets the background to a transparent background with no color option; the other choice is a specified color assingment in hex or other accepted color values such as blue rgb(x,x,x) rgba(x,x,x,x) #xxxxxx hsl(x,x,x) hsla(x,x,x,x)
etc.
透明- 显然将背景设置为没有颜色选项的透明背景;另一个选择是以十六进制或其他可接受的颜色值(例如blue rgb(x,x,x) rgba(x,x,x,x) #xxxxxx hsl(x,x,x) hsla(x,x,x,x)
等)指定的颜色分配。
rgba(x,x,x,x)
however is and is not a horse of a different color as it is more extensive and needs to be broken down to explain. Firstly the difference is that you are assigning a color and setting the transparency,
rgba(x,x,x,x)
然而,它不是一匹不同颜色的马,因为它更广泛,需要分解来解释。首先,区别在于您正在分配颜色并设置透明度,
The "rgb" portion of the setting stands for red green bluerepresenting the first 3 zero settings (0,0,255,X)
and each 0 accepts values from 0 to 255. Playing with these three values in combination mixes the color settings to produce a single color.
设置的“rgb”部分代表代表前 3 个零设置的红绿蓝(0,0,255,X)
,每个 0 接受从 0 到 255 的值。组合使用这三个值会混合颜色设置以产生单一颜色。
The "a" in (rgba) and its zero setting (x,x,x,0) is the ALPHA channel that sets the opacity/transparency of the first three combined colors (x,x,x,?). Of special note this last zero value(x,x,x,0) accepts range of values from 0.0
to 1.0
. A 0.0
setting is fully transparent while 1.0
is solid. So, using the setting rgba(x,x,x,0.5)
would produce a given color at half transparency.
(rgb a) 中的“ a”及其零设置 (x,x,x, 0) 是 ALPHA 通道,用于设置前三种组合颜色 ( x,x,x,?) 的不透明度/透明度。特别注意最后一个零值(x,x,x, 0) 接受从到的值范围。甲设置是完全透明的,而为实心的。因此,使用该设置将产生半透明的给定颜色。0.0
1.0
0.0
1.0
rgba(x,x,x,0.5)
回答by S Shikhar
you want a transparent background, hit this piece of code backgroundColor: 'rgba(1,1,1,0.1)'
你想要一个透明的背景,打这段代码 backgroundColor: 'rgba(1,1,1,0.1)'