Non transparent div inside a transparent div

Question

I am creating a webpage that have a transparent div.

I want to add a non-transparent div inside that transparent div and I find that it is also transparent.

Answer 1

I found this somewhere while researching CSS3 and apologize that I cannot re-call where so as to credit the appropriate author.

But if you are looking for a semi-transparent background solid color on a div. Instead of setting the color and controlling transparency with opacity/alpha properties, set the background-color property directly using rgba(rrr,ggg,bbb,aaa) format. This will prevent any child elements from inheriting any transparency.

ex.

#mydiv { background-color: rgba(128,64,0,0.75); }

Answer 2

There are two ways that I know of to work around this:

• Fake transparency on the containing div by using a transparent PNG as the background image.
• Separate the divs so that they are side-by-side, and then use relative or absolute positioning to stack them.

Answer 3

This doesn't work in CSS unfortunately. In the past I've used positioning to push the non transparent div containing the content into the transparent div. I couldn't dig up some old code from my projects, but I did find this blog post:

Non-transparent elements inside transparent elements

Answer 4

use background, padding, background-origin to control the padding and z-index to control the position of the element. For example:

#mydiv{ background: white; padding:100px; background-origin:border-box; z-index:1}