Question

我有嵌套的div标签，其思路是外面的一个包含一个背景图片，然后内部的那些包含文本。我想更改背景图片div的不透明度，以便它更透明，更容易看到文字。我的问题是它自动将相同的不透明度应用于子div，我不希望它这样做。

以下是代码：

<style type="text/css">
    .myBackgroundDivs {
        background-image: url('homePageBackground.jpg');

        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: contain;
        text-align: center;
        opacity: 0.4;

    }

    .myTextDivs{
            text-align: center;
            opacity:1.0;

    }
</style>

然后：

<div class="container">
    <div class="jumbotron myBackgroundDivs" >
        <div class="myTextDivs">
            <h1>Some Text</h1>
            <h3>Some more text</h3>
            <br><br>
        </div>
    </div>
</div>

现在我调查了这个，我明白对于子元素，不透明度实际上会乘以父元素的不透明度。有了这个逻辑，我尝试使用2.5，所以2.5 * .4是1.0，但我想你只能高达1.0不透明度。

有什么建议吗？

如果有人想解释什么程度/子div的规则从父div继承属性也会很酷

Answer 1

无论何时你不想在内容中使用不透明度而不是{* 3}}背景颜色。

为什么？

因为根据rgba

的不透明度

该值适用于整个元素，包括其内容，即使该值不是由子元素继承的。因此，一个元素及其包含的子元素都具有相同的不透明度到元素的背景，即使元素及其子元素不同的不透明度相互之间。

因此，请参阅下面的代码段：

＆＃13;

/*SNIPPET ONLY*/

* {
  margin: 0;
  padding: 0
}
body {
  background-color: green
}
.container {
  background-color: red;
  border: 1px solid yellow
}
/*GENERAL*/
.myBackgroundDivs {
  text-align: center;
  width:500px;
  margin:auto
}

/*RGBA*/
.rgba .myBackgroundDivs {
  background: url('http://www.lorempixel.com/500/500') no-repeat fixed center / cover;

}
.rgba .myTextDivs {
  background-color: rgba(255,255,255,.4)
}
/*OPACITY*/
.opacity .myBackgroundDivs {
  background: url('http://www.lorempixel.com/500/500') no-repeat fixed center / cover;
  opacity:.4;
}
.opacity .myTextDivs {
  opacity: 1;
}

＆＃13;

<h1>RGBA</h1>
<div class="container rgba">
  <div class="jumbotron myBackgroundDivs">
    <div class="myTextDivs">
      <h1>Some Text</h1>
      <h3>Some more text</h3>
      <br>
      <br>
    </div>
  </div>
</div>
<h1>OPACITY</h1>
<div class="container opacity">
  <div class="jumbotron myBackgroundDivs">
    <div class="myTextDivs">
      <h1>Some Text</h1>
      <h3>Some more text</h3>
      <br>
      <br>
    </div>
  </div>
</div>

＆＃13;

Answer 2

你要做的事情是做不到的由于嵌套的div将继承opacity属性，因此无法覆盖

因为你需要背景图片而不是背景颜色 在这种情况下， rbga（）的使用无用

所以我看到它使用的最佳方式和透明背景图片（gif，png）并让它以这种方式工作。

不透明渗透到儿童div

2 个答案: