Transparent color vs rgba (0,0,0,0)

Question

Is there any major advantage:

background-color: rgba(0,0,0,0); 

instead:

 background-color: transparent; 

?

Answer 1

The behavior is exactly the same, but transparent compatible with IE8 . RGBA more advanced (but does not support IE8 ) and allows you to quickly change it if you want an “almost transparent” color, without having to completely change the attribute.

For example, it can be very fast to install.

 background-color: rgba(0,0,0,0.1); 

Due to the default behavior of browsers that ignored unrecognized properties, it is possible to combine them to use the new one in newer browsers, but leave a fallback for older ones by simply typing both of them:

 background-color: transparent; background-color: rgba(0,0,0,0); 

Or, even more useful, in the case of quoted almost transparent backgrounds, you can write:

 background-color: transparent; background-color: rgba(0,0,0,0.1); 

Newer browsers will set rgba(0,0,0,0.1) as the background, overriding the previous transparent declaration, but IE8 will set transparent as the background, because it will ignore the unrecognized rgba() value, therefore a slightly different result, but in accordance with Graceful principle of degradation.

Answer 2

Note: background_color: rgba(0,0,0,0.0); will be more accurate, but the same. As indicated, background_color: transparent; will be supported in older browsers.

Using background_color is not a problem, since it is used universally in both indicators. The question is the purpose of transparent -vs- rgba .

transparent - obviously, sets the background to a transparent background with no color option; another choice is the specified color definition in hexadecimal 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.

rgba(x,x,x,x) , however, is and is not a horse of a different color, as it is more extensive and must be broken in order to explain. First, the difference is that you set the color and set the transparency,

The “rgb” setting of the setup indicates red green blue , representing the first 3 zero settings (0,0,255,X) , and each 0 takes values ​​from 0 to 255. Playback with these three values ​​in color setting combinations to create a single color.

The " a " in (rgb a ) and its zero setting (x, x, x, 0 ) is the ALPHA channel that sets the transparency / transparency of the first three combined colors ( x, x, x ,?). It should be noted that this last zero value (x, x, x, 0 ) takes a range of values ​​from 0.0 to 1.0 . A 0.0 completely transparent, and 1.0 is solid. Thus, using the rgba(x,x,x,0.5) parameter will result in the specified color with half transparency.