使用 CSS 使子不透明度与父不透明度不同答案

【问题标题】：Have a child opacity different then parent opacity with CSS使用 CSS 使子不透明度与父不透明度不同
【发布时间】：2015-12-31 05:09:43
【问题描述】：

这是我的box 课程

.rectangle-box {
    width: 200px;
    height: 30px;
    background: #808080;
    opacity: 0.3;
    float: right;
}

.rectangle-red {
    width: 65px;
    height: 30px;
    background: #ff4742;
    opacity: 1;
    float: left;
}

在 HTML 中：

<div class="rectangle-box">
    <div class="rectangle-red"></div>
</div>

演示：https://jsfiddle.net/uq6ectfc/1/

我需要rectangle-red 的不透明度为1 和rectangle-box 的0.3。但它坚持父不透明度。

我该如何解决？

【问题讨论】：

Resetting the opacity of a child elements - Maple Browser (Samsung TV App)的可能重复
那个可能的重复实际上是从developer.mozilla.org/en-US/docs/Web/CSS/opacity 链接到“如果你不想对子元素应用不透明度...”。如果你觉得它不像是重复的，我会收回我的简历。
@iamnotmaynard 这个骗子的问题是它没有覆盖其他内部子元素，也没有使用例如 svg 内容的背景图像。

标签： html css

【解决方案1】：

opacity 不能大于父级

但你可以使用两种方法

我用过rgbargba(0,0,0,0.0)

.rectangle-box {
  width: 200px;
  height: 30px;
  background: rgba(128, 128, 128, 0.3);
  float: right;
  position: relative;
}

.rectangle-red {
  width: 65px;
  height: 30px;
  background: #ff4742;
  opacity: 1;
  float: left;
}

<div class="rectangle-box">
  <div class="rectangle-red"></div>
</div>

或者我使用:pseudo元素添加background的第二种方法

.rectangle-box {
  width: 200px;
  height: 30px;
  float: right;
  position: relative;
}

.rectangle-box:after {
  content: '';
  opacity: 0.3;
  background: #808080;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index:-1;
}

.rectangle-red {
  width: 65px;
  height: 30px;
  background: #ff4742;
  opacity: 1;
  float: left;
}

<div class="rectangle-box">
  <div class="rectangle-red"></div>
</div>

【讨论】：

【解决方案2】：

使用 RGBA 而不是十六进制。使用不透明度：影响子元素而 rgba 不影响

.rectangle-box {
        width: 200px;
        height: 30px;
        background-color: rgba(128,128,128, 0.3);
        float: right;

    }

    .rectangle-red {
        width: 65px;
        height: 30px;
        background-color: rgba(255,71,66, 1);
      float: left;
    }

【讨论】：

我喜欢这个解决方案。这里唯一需要注意的（也是诀窍的关键）是只有背景颜色才有透明度。如果有其他内容，则不会有透明度。

【解决方案3】：

一种更好的结构方式是创建一个包含两个框的 div。这样每个盒子的不透明度都不会相互干扰。

<div class="container">
    <div class="rectangle-box"></div>
    <div class="rectangle-red"></div>
</div>

.container{
    width: 200px;
    height: 30px;
    float: right;
}
.rectangle-box {
    width: 100%;
    height: 100%;
    background: #808080;
    opacity: 0.3;
}

.rectangle-red {
    width: 65px;
    height: 100%;
    background: #ff4742;
    opacity: 1;
    float: left;
}

【讨论】：

【解决方案4】：

你不能

你所能做的就是在.rectangle-box绝对（我的情况）或相对或任何你想要的低不透明度.lower-opacity中创建元素，所以它们是兄弟姐妹，不会互相干扰不透明度属性

.rectangle-box {
    width: 200px;
    height: 30px;
    float: right;
    position: relative;
}
.lower-opacity{
    position: absolute;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    background: #808080; //**EDITED** BACKGROUND NOW WILL BE TRANSPARENT
}
.rectangle-red {
    width: 65px;
    height: 30px;
    background: #ff4742;
    opacity: 1;
    float: left;
}


<div class="rectangle-box">
    <div class="lower-opacity"></div>
    <div class="rectangle-red"></div>
</div>

【讨论】：

这不起作用，因为矩形框的 bg-color 没有不透明度，它将覆盖 lower-opacity one
不，不是，然后在较低不透明度上使用此背景颜色，您只是没有得到这里的逻辑。你可以用它做任何你想做的事情，但这就是你应该使用的结构。

【解决方案5】：

这是一种使用伪元素的好方法。

有了这个，您还可以为每个背景添加图像和 svg，这提供了很多选择。

如果您需要每个框内的其他元素，则需要第二个内部 div。

.rectangle-box {
  width: 200px;
  height: 30px;
  float: right;
  position: relative;
}

.rectangle-box:before {
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: #808080;
  opacity: 0.3;
}
.rectangle-box:after {
  content: "";
  top: 0;
  left: 0;
  width: 65px;
  height: 100%;
  position: absolute;
  background: #ff4742;
  opacity: 1;
}

<div class="rectangle-box">
</div>

【讨论】：