Should you use rgba (0, 0, 0, 0) or rgba (255, 255, 255, 0) for transparency in CSS?

Question

Should you use rgba(0, 0, 0, 0) or rgba(255, 255, 255, 0) for transparency in CSS?

What are the pros and cons of each?

Answer 1

The final parameter to the rgba() function is the alpha or opacity parameter. If you set it to 0 , it will mean "completely transparent", and the first three parameters ( red , green and blue channels) will not matter, because you will not be able to see the color in any case.

Given this, I would choose rgba(0, 0, 0, 0) because:

• it's less typing
• it stores a few extra bytes from your CSS file and
• you will see an obvious problem if the alpha value changes to something unwanted.

You could avoid the rgba model rgba and use the transparent keyword instead, which according to w3.org is equivalent to "transparent black" and must be evaluated before rgba(0, 0, 0, 0) . For example:

 h1 { background-color: transparent; } 

This will save you a couple more bytes, while your intentions to use transparency are obvious (in case someone is not familiar with RGBA).

As with CSS3, you can use the transparent keyword for any CSS property that accepts color.

Answer 2

There are two ways to preserve color with alpha. The first is exactly the same as you see, with each component as it is. The second is to use pre-multiplied alpha, where the color values ​​are multiplied by alpha after converting it to the range 0.0-1.0; this is done to facilitate compositing . Usually you should not notice or care about which path is implemented by any particular engine, but there are corner cases where you could, for example, if you tried to increase the color opacity. If you use rgba(0, 0, 0, 0) , you are less likely to see the difference between the two approaches.

Answer 3

There is a slight difference when u uses rgba (255,255,255, a ), the background color becomes lighter as the value of a increases from 0.0 to 1.0, where, as with rgba (0,0,0, a ), the background color getting darker as the value of a increases from 0.0 to 1.0. Having said that, it is clear that both (255,255,255,0) and (0,0,0,0) make up a transparent background. (255,255,255,1) will make the background completely white, where (0,0,0,1) will make the background completely black.