使用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的不透明度和0.3的rectangle-box的不透明度。但它坚持父对象的不透明性。

我该怎么修？

Answer 1

您不能opacity不能大于父

但是你可以使用两种方法

我用过rgba rgba(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>

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

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

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

Answer 5

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

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

如果你在每个盒子里需要其他元素，你需要第二个内部分区

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