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.

I try to set the div inside to opacity:1 but it doesn't work.

What should I do?

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); }