使用CSS设置子元素的不同不透明度。

Question

这里是我的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。但是它们都受到父元素不透明度的影响。

我该如何解决这个问题？

- Michael

---

可能是重置子元素的不透明度 - 枫树浏览器（三星电视应用）的重复问题。 - Reinstate Monica -- notmaynard

那个可能的重复链接实际上是从 https://developer.mozilla.org/en-US/docs/Web/CSS/opacity 下的“如果您不想将不透明度应用于子元素...”中链接过来的。如果您觉得它不像是一个重复项，我会撤回我的简历。 - Reinstate Monica -- notmaynard

@iamnotmaynard 那个重复的问题在于它没有涵盖其他内部子元素，也没有使用例如SVG内容的背景图像。 - Asons

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

- Vitorino fernandes

Answer 2

使用 RGBA 而不是十六进制颜色表示。使用 opacity：会影响到子元素，而 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;
    } 

- Ty T.

---

我喜欢这个解决方案。唯一的注意事项（也是这个技巧的关键）是只有背景颜色会有透明度。如果有其他内容，它们将不会具有透明度。 - gfullam

Answer 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;
}

- Roman Khrystynych

Answer 4

这里有一种使用伪元素的漂亮简洁方式。使用此方式，您还可以将图像和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>

- Asons

Answer 5

你所能做的就是在 .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>

- Szymon

---

这样做不行，因为矩形框有一个没有透明度的背景颜色，它会覆盖掉“较低透明度”的那个。 - Michael

不是这样的，然后在低透明度的情况下使用这个背景颜色，你只是没有理解这里的逻辑。你可以随意更改，但这就是你应该使用的结构来使其工作。 - Szymon