What is the difference between opacity and that th

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

when you use alpha, you are only setting opacity for that specific property of the div. So only the background will be slightly transparent if you set the alpha value to say .5

However, when you set opacity to .5, the ENTIRE div and everything inside it will stay slightly transparent, no matter what alpha values elements within the div have.

Within a div with opacity set to .5, an element will be at max ".5" opaque (when its alpha value is set to 1). If its alpha value is set to .5, the transparent affect will compound and it will actually be something like ".25" transparent. Not sure about the specific numbers.

Answer 2

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 3

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