不透明出血到孩子div [英] Opacity bleeding into child divs

问题描述

我有嵌套的div标签，这个想法是外层包含一个背景图片，然后内层有文本。我想改变背景图片div的不透明度，使它更透明，更容易看到文本。我的问题是，它自动应用相同的不透明度到子div，我不想它做。

I have nested div tags, and the idea is that the outer one contains a background picture, and then the inner ones have text over them. I'd like to change the opacity on the background picture div so that it's more transparent and easier to see the text. My problem is that it's automatically applying that same opacity to child divs, which I do not want it to do.

这是代码：

<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不透明度。

Now I looked into this, and I understand that for child elements, opacity actually multiplies itself by the parent element's opacity. With this logic, I tried using 2.5 so 2.5*.4 is 1.0, but I guess you can only go as high as 1.0 opacity.

有任何建议吗？

如果有人想解释什么程度/子div的规则继承属性每当你不想将透明度应用于内部子使用而时，

If anyone wanted to explain to what extent/the rules of child divs inheriting attributes from parent divs that would be cool too

推荐答案

=https://developer.mozilla.org/en-US/docs/Web/CSS/background-color =nofollow>背景颜色上的rgba 。

whenever you don't want to apply the opacity to inner child use instead rgba on background-color.

为什么？

因为在透明度 MDN

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

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

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

So, see snippet below with differences:

/*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;
}

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

这篇关于不透明出血到孩子div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！