What is the difference between opacity and that through alpha channel (rgba)?

Question

div { background-color: rgb(255,0,0); opacity: 1; }  div { background-color: rgba(255,0,0,1); } 

What is the difference between the above two?

Answer 1

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

This is well explained here. http://www.css3.info/introduction-opacity-rgba/

Answer 2

Opacity : The opacity property sets the opacity level for an element.(Setting opacity for an elements makes the whole element transparent including its content.)

Defining opacity:

element{opacity:0.5} //makes the element and it's content 50% transparent 

The opacity-level describes the transparency-level, where 1 is not transparant at all, 0.5 is 50% see-through, and 0 is completely transparent.

Alpha Channel RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object. Background : rgba (Red,Green,Blue,Opacity) (Setting rgba of an element only makes the element background transparent leaving its content as it is.)

Defining Background rgba: background:

element{    background:rgba(40, 41, 42, 0.5); } 

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).

To convert a hex value of color to rgb: Here

Further Info:

RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.