如何以不影响子 div 的方式赋予父 div 不透明度？ [复制]答案

【问题标题】：How to give opacity to parent div in such a way that it does not effect child div? [duplicate]如何以不影响子 div 的方式赋予父 div 不透明度？ [复制]
【发布时间】：2019-10-01 21:06:00
【问题描述】：

我给父 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 中的图像会改变其不透明度

【问题讨论】：

您应该在#container 上使用::after 选择器，并添加不透明度。

标签： html css jsx

【解决方案1】：

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

【讨论】：