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

User · Answer

There are two ways of storing a color with alpha  The first is exactly as you see it  with each component as-is  The second is to use pre-multiplied alpha  where the color values are multiplied by the alpha after converting it to the range 0 0-1 0  this is done to make compositing easier  Ordinarily you shouldn t notice or care which way is implemented by any particular engine  but there are corner cases where you might  for example if you tried to increase the opacity of the color  If you use rgba 0  0  0  0  you are less likely to to see a difference between the two approaches

User · Answer

There a small difference when u use rgba 255 255 255 a  background color becomes more and more lighter as the value of  a  increase from 0 0 to 1 0  Where as when use rgba 0 0 0 a   the background color becomes more and more darker as the value of  a  increases from 0 0 to 1 0  Having said that  its clear that both  255 255 255 0  and  0 0 0 0  make background  transparent   255 255 255 1  would make the background completely white where as   0 0 0 1  would make background completely black

User · Answer

The last 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  the red  green  and blue channels  won t matter because you won t be able to see the color anyway   With that in mind  I would choose rgba 0  0  0  0  because    it s less typing   it keeps a few extra bytes out of your CSS file  and  you will see an obvious problem if the alpha value changes to something undesirable    You could avoid the rgba model altogether and use the transparent keyword instead  which according to w3 org  is equivalent to  transparent black  and should compute to rgba 0  0  0  0   For example   h1       background-color  transparent      This saves you yet another couple bytes while your intentions of using transparency are obvious  in case one is unfamiliar with RGBA    As of CSS3  you can use the transparent keyword for any CSS property that accepts a color

User · Answer

I would recommend using rgba 255 255 255 0  because broken  newest  safari thinks that if you are using transparent or rgba 0 0 0 0  in linear-gradent you really mean gray  For more info please head to - What happens in Safari with the transparent color

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

Examples related to css

Examples related to colors