Nontransparent Child In Transparent Parent

I have transparent div-block in html. There is another child blocks in it. Is it possible to make that child divs untransparent?

Solution 1:

I don't believe so, but you can do something like this:

<div style="position: relative">
    <div style="position: absolute; top: 0; left: 0; opacity: 0.5; z-index: 2;">
    </div>
    <div style="position: absolute; top: 0; left: 0; z-index: 3;">
        <p>I'm fully opaque</p>
    </div>
</div>

This technique basically overlays one div on top of the other. It's useful for animating background images and for other situations but might not be applicable to your use case - you'll have to elaborate.

Solution 2:

No, it isn't possible. But in case you're merely looking for a transparent background, you can set the background-color using the rgba(RRR, GGG, BBB, AAA) construct, in which the last number is the alpha transparency value. It only works in modern browsers though.