Question

我给父div设置了不透明性，但也影响了子div。我只想给父div设置不透明性

我创建了单独的div

 <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>

我希望只有父div中的图像会更改其不透明度

Answer 1

如果尝试更改背景图像的不透明度，则可以使用css将其插入到伪元素中，然后更改该伪元素的不透明度。更改父项的不透明度也会更改子项的不透明度。这是Chris Coyier所做的一个示例： https://css-tricks.com/snippets/css/transparent-background-images/

如何以不影响子div的方式赋予父div不透明度？

1 个答案: