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 colorg:
255
stands for max green colorb:
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.