Whats the difference in setting opacity and setting background as rgba(x,y,z,a)?

Question

i guess i'm getting kind of same result.

Please make me clear about this properties.

score 4 · Accepted Answer · answered Mar 14 '14 at 07:20

Opacity : Makes the whole element transparent including its content. Defining opacity:

element{opacity:0.5}

Background rgba (Red,Green,Blue,Opacity): It only makes the element background transparent leaving its content as it is. Defining Background rgba: background:

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

In both place, opacity value extends form 0 to 1. (Where value 1 acts as total opaque and 0 as complete transparent) To convert a hex value of color to rgb: Here

score -1 · Answer 2 · answered Mar 14 '14 at 07:21

-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/

answered Mar 14 '14 at 07:21

Arsen Ibragimov

425
4
18

score -1 · Answer 3 · answered Mar 14 '14 at 07:22

-1

They are not the same. Setting the background to a transparent color will do just that: the background will become see-through, but not the content. Setting the opacity affects the whole element.

answered Mar 14 '14 at 07:22

Wander Nauta

18,832
1
45
62

Whats the difference in setting opacity and setting background as rgba(x,y,z,a)?

3 Answers3