让孩子的不透明度与CSS的父不透明度不同

这是我的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中:

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

我需要rectangle-red有混浊1及rectangle-box的0.3.但它坚持父母的不透明.

我该如何解决？

你不能不能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;
}

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