CODEWITHSUNDEEP
csstwitteropacity
user962206
user962206

Reputation: 16147

Opacity affecting the whole content

How does twitter implement this kind of transparency ?

enter image description here

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?

Upvotes: 0

Views: 106

Answers (3)

JSW189
JSW189

Reputation: 6325

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

Upvotes: 2

Artur Stary
Artur Stary

Reputation: 744

CSS opacity will always work that way. You can always use semi-transparent png as a background.

Upvotes: 0

Hurricane Hamilton
Hurricane Hamilton

Reputation: 574

background-color: rgba(255,255,255,.5);

http://www.css3.info/preview/rgba/

Upvotes: 1

Related Questions