When applying opacity to a parent div, I noticed that it also affects the child div. My intention is to only apply opacity to the parent div.
I have set up separate divs for this purpose.
<div id="container" style={{backgroundImage:"url('/images/world-map-dotted.png')",padding:'50px',height:'800px',width:'100%',textAlign: 'center',opacity:'0.8'}}>
<div id="box" style={{height:'100%',width:'100%'}}>
<div style={{backgroundImage:"url('/images/bg_login.png')",padding:'200px'}}>
<h1 style={{fontSize: '30px'}}>Our Website Under Maintenance</h1>
<p style={{fontSize:'16px'}}><b>Apologies for any inconvenience caused by our ongoing maintenance work.
<p style={{fontSize:'16px'}}><b>For assistance, please reach out to <a></a></b></p></b>
</p>
</div>
</div>
</div>
In my design, I anticipate that only the image within the parent div will adjust its opacity without affecting the child elements.