March 1, 2012

Confusion about Transparent Background in CSS

Question by sandbox

I know the transparency can be attained using value rgba(221, 221, 221, 0.6). I want to know what does 221,221,221,0.6 denotes??

Answer by BoltClock

The rgba() color notation allows you to specify the red, green, blue and alpha values for a color respectively. That means 221 red, 221 green, 221 blue and 0.6 (60%) alpha.

The RGB values have a range of 0 to 255; this is the standard range for the RGB color model and notation (this is explained in the preceding section for the rgb() notation). The higher the value for a color component, the more that color component will be blended into the resulting color.

The alpha value has a range of 0 to 1, with decimal values. It is what determines the opacity (or transparency) of the color. The higher the value, the more opaque the resulting color will be.

Answer by Starx

Seems, like you are not clear about the concept of color values.

Every color values is represented by 8bit length. That is 11111111 which translates to 256, but since 0 is the starting digit. The max value in 255.

Whenever defining color, there are 3 major colors, red,green and blue, which is what rgb stands for. Since, CSS3 it give us the possibility of transparency, by implementing one more property alpha which represent the opacity of the color value. So, the new command become rgba

Now,

r: 255 stands for max red color

g: 255 stands for max green color

b: 255 stands for max green color

When all the color values have maximum values, the resulting color is white, which is exactly what happens, when you are spinning a color wheel.

Now, comes the alpha part. It is represent in percentage/100. So 1 would be completely opaque and 0 would be completely transparent.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!