如何使用html/css在不影响子元素的情况下应用不透明度？

Question

我想用html和css实现这一点：

​

​

我尝试将容器的不透明度设置为0.3，并将长方体的不透明度设置为1，但都不起作用:两个div的不透明度都为0.3。

jsFiddle of my try here

我试图实现的效果是在页面顶部出现一个弹出框。通过淡出下面的内容来突出显示它(通过降低不透明度)。

Answer 1

据我所知，你不能用一种简单的方法做这件事。这里有几个选项：

1. 使用绝对定位将盒子定位在容器的“内部”。

#container {不透明度: 0.3；背景颜色：#777788；位置:绝对；顶部: 100px；左侧: 100px；高度: 150px；宽度: 300px；} #box {不透明度: 1；背景色：#ffffff；位置:绝对；顶部: 110px；左侧: 110px；高度: 130px；宽度: 270px；}

1. 使用Javascript -几乎与上面相同，但位置和大小不必硬编码。

Answer 2

您可以将不透明度与背景色结合使用，如下所示：

​

#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>

​

​Live demo

Answer 3

尝试使用rgba作为一个'pre content‘覆盖到你的图像上，这是一个保持响应的好方法，并且不会影响其他任何元素。

​

header #inner_header_post_thumb {
  background-position: center;
  background-size: cover;
  position: relative;
  background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  border-bottom: 4px solid #222;
}

header #inner_header_post_thumb .dark_overlay {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
}

header #inner_header_post_thumb .dark_overlay .container .header-txt {
  padding-top: 220px;
  padding-bottom: 220px;
  color: #ffffff;
  text-align:center;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
  font-size: 40px;
  color: #ffffff;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p {
  font-size: 18px;
  font-weight: 300;
}

header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
  font-weight: 700;
}

<header>
  <div id="inner_header_post_thumb">
    <div class="dark_overlay">
      <div class="container">
        <div class="row header-txt">
          <div class="col-xs-12 col-sm-12">
            <h1>Title On Dark A Underlay</h1>
            <h3>Have a dark background image overlay without affecting other elements</h3>
            <p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>

          </div>
        </div>
      </div>
    </div>
  </div>
</header>

​

See a working codepen here