Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

colors

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?

like image 811
Joe Avatar asked Apr 11 '13 20:04

Joe


People also ask

What is the rgba for transparent?

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

What does rgba 255 0 0 0.2 color code in CSS means?

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

Is there a color code for transparent?

You can actually apply a hex code color that is transparent. The hex code for transparent white (not that the color matters when it is fully transparent) is two zeros followed by white's hex code of FFFFFF or 00FFFFFF.

What's the difference between using opacity and rgba transparency in CSS?

Opacity sets the opacity value for an element and all of its children; While RGBA sets the opacity value only for a single declaration.


2 Answers

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:

  1. it's less typing,
  2. it keeps a few extra bytes out of your CSS file, and
  3. 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.

like image 98
Cᴏʀʏ Avatar answered Oct 16 '22 17:10

Cᴏʀʏ


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.

like image 42
Mark Ransom Avatar answered Oct 16 '22 17:10

Mark Ransom