为父级div设置不透明度，而不为子级仅用于父级

Question

我有一个导航。在这个nnaviggation中，ai有一个div activity-info，它必须是黑手，不透明度必须是.5，在此标签中，我有一个内容activity-container的div，我需要这个div是opacity:1;，但没有用。

这是演示：Demo

我如何为父母设置不透明度，而不为孩子设置？???

    <button mat-raised-button id="showInfos" color="primary">
  Click for Open
</button>

<div id="activity-info" class="activity-info">
  <div class="activity-container">
    <div class="activity-header">
      <span id="closeActivityInfo">
        <mat-icon>clear</mat-icon>
      </span>
      <div class="activity-info-title">
        <span>
          {{ "GENERAL.ACTIVITY_INFO" | translate }}
        </span>
      </div>
    </div>
    <div class="activity-content">
      <div>
        <div class="item">
          <div class="item-label">{{ "GENERAL.CREATOR" | translate }} :</div>
          <div class="item-value">
            <pfa-user-field [displayName]="oldEditModel.creator" [row]="false"></pfa-user-field>
          </div>
        </div>
        <mat-divider></mat-divider>
        <div class="item">
          <div class="item-label">{{ "GENERAL.CREATOR" | translate }} :</div>
          <div class="item-value">
            <pfa-date-time-format [date]="oldEditModel.createdDate"></pfa-date-time-format>
          </div>
        </div>
        <mat-divider></mat-divider>
        <div class="item">
          <div class="item-label">
            {{ "GENERAL.LAST_CHANGED_BY" | translate }} :
          </div>
          <div class="item-value">
            <pfa-user-field [row]="false" [displayName]="oldEditModel.lastChangeBy"></pfa-user-field>
          </div>
        </div>
        <mat-divider></mat-divider>
        <div class="item">
          <div class="item-label">
            {{ "GENERAL.LAST_CHANGE_DATA" | translate }} :
          </div>
          <div class="item-value">
            <pfa-date-time-format [date]="oldEditModel.lastChangeDate"></pfa-date-time-format>
          </div>
        </div>
        <mat-divider></mat-divider>
        <div class="item">
          <div class="item-label">
            {{ "GENERAL.DELETED_BY" | translate }} :
          </div>
          <div class="item-value">
            <pfa-user-field [displayName]="oldEditModel.deletedBy"></pfa-user-field>
          </div>
        </div>
        <mat-divider></mat-divider>
        <div class="item">
          <div class="item-label">
            {{ "GENERAL.DELETE_DATE" | translate }} :
          </div>
          <div class="item-value">
            <pfa-date-time-format [date]="oldEditModel.deletedDate"></pfa-date-time-format>
          </div>
        </div>
        <mat-divider></mat-divider>
      </div>
    </div>
  </div>
</div>

和CSS代码：

    #showInfos {
  display: block;
  width: 100% !important;
  margin-bottom: 7px !important;
}
#closeActivityInfo {
  display: block;
}
.activity-info-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.activity-info {
  height: 100%;
  opacity:.5;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black !important; /* Add black background */
  overflow-x: hidden;
  transition: 0.5s;
  margin-top: 29px; /* padding to margin,  calc button height */
}

.activity-container {
  width: 80% !important; /* 100% to 80% */
  height: 100%; /* add 100%*/
  background-color: red; /*background color red added*/
}

.activity-info.showNavbar {
  width: 100%;
}
.activity-container {
  width: 100%;
}
.edit-form {
  width: 100%;
}
.form-content {
  height: 100%;
}
.showInfos {
  width: 60px;
  height: 40px;
  background-color: #e52727;
  color: white;
  position: absolute;
  right: 40px;
  bottom: 20px;
}