23

Is there any major advantage to use: 

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

instead of:

background-color: transparent;

?

sdvnksv
  • 9,350
  • 18
  • 56
  • 108
  • related : [CSS background:none vs background:transparent](http://stackoverflow.com/questions/20784292/css-backgroundnone-vs-backgroundtransparent) – web-tiki Feb 03 '15 at 08:57

4 Answers4

23

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.

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 transparent backgrounds, 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 Degradation principle.

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
  • I really don't know this: my doubt (but it's only a doubt) is that a browser non compatibile with rgba coud simply ignore this declaration and not setting `none` as value. In case that this declaration is the unique one, behaviour would be what you described, but in case of a declaration that should overwrite another one.... if browser ignores this rule.... you don't obtain `background:none` equivalent. – Luca Detomi Feb 03 '15 at 09:24
  • The normal behaviour for browsers when they encounter a decalration that they don't understand/support is to not do anything as they don't know what to do. So the `background-color` property would remain unchanged and stay default witch is in fact `transparent` and not `none` ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background)) – web-tiki Feb 03 '15 at 09:32
  • In case the decalration is supposed to override an other one then it wouldn't work though, you are right. – web-tiki Feb 03 '15 at 10:00
1

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.

Using the background_color is not the issue as it is used universally in both indicators. The issue of question is in the assignment of transparent -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.

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,

The "rgb" portion of the setting stands for red green blue representing 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.

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.

BobDCoder
  • 341
  • 2
  • 6
0

I've found a scenario where you can spot a difference between the two.

I have a case where I want to place a red diagonal line as a strikethrough a div which needs the background to use transparent and not rgba(0, 0, 0, 0).

This is my code:

<div className="relative">
  <p>Text here</p>
  <div style={{background: "linear-gradient(to left top, transparent 45%, #d10813 48.5%, #d10813 51.5%, transparent 55%)"}} className="absolute top-0 w-full h-full"></div>
</div>

If you switch transparent 45% to rgba(0, 0, 0, 0.45) you can see that it doesn't work anymore.

So, in a few words transparent with opacity is not the same as black with opacity obviously.

(The code is in react and the classnames are from tailwindcss)

user16100372
  • 1
-3

you want a transparent background in React Native, apply this piece of code

backgroundColor: 'rgba(1,1,1,0.1)'
S Shikhar
  • 21
  • 4