Question

How does twitter implement this kind of transparency ?

I tried adding opacity to my code but every children element is being affected. what I aim is somewhat like in the image above. how would I do that? is opacity the right css rule for that?

Answer 1

Try using RGBa instead of opacity to achieve this effect. The opacity property forces all child elements to also become transparent, and there are not many simple ways to work around that. RGBa makes the element transparent but all the child elements remain unchanged.

Example:

div {
   background: rgba(10, 10, 10, 0.5); 
}

The first three numbers in RGBa represent the color in RGB values; the fourth represents a transparency, and should be between 0.0 and 1.0 (similar to the opacity property).

JS Fiddle Example

RGB Color Chart