0

i am giving opacity to parent div but it also effect child div.i only want to give opacity to parent div

i have created separate divs

 <div id="container" style={{backgroundImage:"url('/images/world-map-dotted.png')",padding:'100px',height:'1000px',width:'100%',textAlign: 'center',opacity:'0.9'}}>
        <div id="box" style={{height:'100%',width:'100%'}}>
          <div style={{backgroundImage:"url('/images/bg_login.png')",padding:'300px'}}>
            <h1 style={{fontSize: '40px'}}>We&rsquo;ll be back soon!</h1>
            <p style={{fontSize:'18px'}}><b>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment.
              <p style={{fontSize:'18px'}}><b>For any queries, please contact <a></a></b></p></b>
            </p>
          </div>
        </div>
      </div>

i expect that only image in parent div change its opacity

user9746311
  • 13
  • 1
  • 4

1 Answers1

2

If you are trying to change the opacity on your background-image you can insert it into a pseudo element using css and change the opacity on that pseudo element. Changing opacity on a parent will change the opacity on it's children as well. Here is an example done by Chris Coyier: https://css-tricks.com/snippets/css/transparent-background-images/

SeanAlvis
  • 19
  • 3