1

With my div tag and div id="wrapper", I have set the wrapper's width to 960px and wanted to have that semi-transparent so the body background shows through. I also have another div with text inside the wrapper and I want to set that text as 0 opacity so the text doesn't become semi-transparent when the div is set.

At first I tried setting the

 #wrapper{ opacity: .5;}

but that didn't work, so I set the 

background-color: rgba(0,100,0,.5);

and that did the trick. The text is not transparent but the wrapper is.

My question is: Is this the best practice or what is the most common and easiest way to achieve this type of design?

Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113
ValleyDigital
  • 1,460
  • 4
  • 21
  • 37
  • possible duplicate of [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on) – Adriano Feb 27 '14 at 08:37

1 Answers1

0

Your choices are limited. Using RGBA on the container div is one of the cleaner ways if you can. Otherwise, remove the text from the container and layer them so they just appear that it is contained within the container.

It would have been nice if CSS would allow opacity: 2 for the child, or allow overriding the opacity from children, but it doesn't.

Robert McKee
  • 21,305
  • 1
  • 43
  • 57