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

Question

我想用html和css实现这个目的:

我试图将容器的不透明度设置为0.3,将框设置为1,但它不起作用:两个div都有0.3不透明度.

我在这里尝试一下

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

Answer 1

嗨你可以使用像这样的背景颜色的opicity

CSS

#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);
}

HTML

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

现场演示 http://jsfiddle.net/rohitazad/yT6nG/29/

Answer 2

据我所知,你不能以一种简单的方式做到这一点.这里有几个选项:1.使用绝对定位将容器"放置"在容器内.

#container {
    opacity: 0.3;
    background-color: #777788;
    position: absolute;
    top: 100px;
    left: 100px;
    height: 150px;
    width: 300px;
}
#box {
    opacity: 1;
    background-color: #ffffff;
    position: absolute;
    top: 110px;
    left: 110px;
    height: 130px;
    width: 270px;
}

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

Answer 3

您无法在不影响子元素的情况下应用不透明度属性！

“不透明度适用于整个元素，包括其内容，即使该值不被子元素继承。因此，该元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们相对于背景具有不同的不透明度。彼此之间...如果您不想对子元素应用不透明度，请改用背景属性。” https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

如果您希望不透明度仅应用于背景而不影响子元素，请使用：

background-color: rgba(255, 255, 255, .3)

但是，如果将它们放置在 div 父元素内并使用 CSS 位置属性，则可以获得所需的效果：

.parent {
  border: solid green 3px;
  position: relative;
  width: 400px;
  height: 200px;
}

.sibling-one {
  border: solid red 3px;
  position: absolute;
  box-sizing: border-box;
  width: 400px;
  height: 200px;
  opacity: .3;
 }

.sibling-two {
    border: solid blue 1px;
    margin: 10px;
    width: 200px;
    height: 100px;
    position: absolute;
    transform: translateY(50%);
}  

<div class="parent">
  <div class="sibling-one">
  <p>A sibling's one element</p>
</div>
<div class="sibling-two">
    <p>A sibling's two element</p>
</div>
</div>

Answer 4

尝试将rgba用作图像的“预内容”叠加层，这是使事物保持响应状态并且不影响其他任何元素的好方法。

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>

在这里查看有效的Codepen

Answer 5

Using background-color: rgba(#777788, 0.3); instead of opacity could maybe fix the problem.