Home/ Questions/Q 8273553
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T07:31:12+00:00

I have two divs, on the outer div I have given an opacity of

  • 0

I have two divs, on the outer div I have given an opacity of .1, and then I have an inner div that should not inherit the parent containers opacity property. But to avoid this what I did was to add a z -index property (higher to the child element) but it doesnt work. How do I avoid child div to inherit the opacity property of its parent container:

<!DOCTYPE HTMl>
<html>
    <head>  
        <style type="text/css">
            #outer{width:500px;height:400px;background:#000000;border:1px solid red;opacity:.1;z-index:1}
            #inner{width:450px;height:350px;background:#ffffff;margin: 0 auto;margin-top:20px;z-index:2}

        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use rgba property to get this working. e-g below should work:

    <!DOCTYPE HTMl>
<html>
    <head>  
        <style type="text/css">
            #outer{width:500px;height:400px;background:#000000;border:1px solid red;background:rgba(255,0,0,0.5);}
            #inner{width:450px;height:350px;background:#ffffff;margin: 0 auto;margin-top:20px;background:rgba(255,0,0,1);}

        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>
    • 0