仅管理包含* ngFor的第一个div父级的不透明度

Question

我试图使第一个div不透明，它包含一个带有图标和h5的附加div。在第二个div中，我希望它保持不透明:1(不透明)

这是HTML代码：

<div class="row clearfix">
    <div class="col-lg-3 col-md-6 col-sm-12 mb-30 parent" (click)="click(item)" *ngFor="let item of services">
      <div class="pd-30 bg-secondary border-radius-4 box-shadow text-center height-100-p child">
        <div style="margin-top: 30px">
          <i class="{{item.icon_class}}" style="font-size:40px;" aria-hidden="true"></i>
        </div>
        <h5 class="pt-20 mb-30" style="white-space: normal;">{{item.title}}</h5>
      </div>
    </div>
</div>

CSS：

.parent{
    opacity: 0.3;
}

.child{
    background-color:rgba(0,0,0,1);
}

这就是目前的情况：

​

​

在网络上，我发现了一些示例，这些示例首先关闭第一个div，而我无法这样做，因为for循环存在(* ngFor)

小费？

除其他外，我还必须实现一个函数，该函数允许用户管理不透明度的百分比(这是因为每个用户将有不同的背景，因此有些用户将不得不调整不透明度)。

谢谢大家！

Answer 1

很抱歉耽误了大家的时间，谢谢大家的回答！

我尝试了所有，但没有成功，最后我解决了优化(我认为)，短代码和使用'rgba‘的工作。

我创建了具有不透明度程度的各种css类：

​

 /* opacity_level */
.opacity20 {
  background: rgba(255,255,255,0.2) !important;
}
.opacity30 {
  background: rgba(255,255,255,0.3) !important;
}
.opacity40 {
  background: rgba(255,255,255,0.4) !important;
}
.opacity50 {
  background: rgba(255,255,255,0.5) !important;
}
.opacity60 {
  background: rgba(255,255,255,0.6) !important;
}
.opacity70 {
  background: rgba(255,255,255,0.7) !important;
}
.opacity80 {
  background: rgba(255,255,255,0.8) !important;
}
.opacity90 {
  background: rgba(255,255,255,0.9) !important;
}
.opacity100 {
  background: rgba(255,255,255,1) !important;
}

​

然后，我声明了一个变量OpacitiyClass，它将接受用户将从设置页面中选择的值(类名css)：

opacityClass: string = configuration.opacity_class；

我直接在html中传递它：

​

      <div class="row clearfix">
        <div class="col-lg-3 col-md-6 col-sm-12 mb-30" (click)="click(item)"
                *ngFor="let item of services">
          <div class="pd-30 {{opacityClass}} border-radius-4 box-shadow text-center height-100-p">
            <i class="{{item.icon_class}}" style="font-size:40px;" aria-hidden="true"></i>
            <h5 class="pt-20 mb-30" style="white-space: normal;">{{item.title}}</h5>
          </div>
        </div>
      </div>

​

我希望它能帮到别人！

再次感谢大家！

Answer 2

几种解决办法：

• 使用*ngFor本身：
• 使用CSS选择器:first-child 父母div:第一个孩子{不透明: 0.3；}

Answer 3

您可以使用: css中.parent上的第一个子选择器。