Question

我有一个应用程序，可以确认某些元素。创建它们时，它们默认为未确认，然后再进行确认。它们可以属于另一个A或B类。

如果他们属于A，我有一个css规则

.a {
   background-color: red
}

如果他们属于B，那么css就是

.b {
   background-color: blue
}

现在我有未经证实和确认的课程。如果确认，则类添加1.0的不透明度，如果未确认则添加.5。我的问题是.5也会影响元素上的文本，这使得阅读起来很麻烦。

理想情况下，我可以拥有类似的东西。一个 { background-color：rgba（255,0,0，X） }

是否可以仅在另一个类上覆盖alpha值？我不想为.confirmed或.unconfirmed类指定颜色，因为它可以根据类是.a还是.b来改变。

Answer 1

您无法仅覆盖背景Alpha通道。你不需要做的好事:)）

只需组合您的班级选择器来设置组合样式，例如：

.a.unconfirmed和.a.confirmed

实施例

div {
  display: inline-block;
}
.a.unconfirmed {
  height: 100px;
  width: 100px;
  background: rgba(255, 0, 0, 0.5);
}
.a.confirmed {
  height: 100px;
  width: 100px;
  background: rgba(255, 0, 0, 1);
}
.b.unconfirmed {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 255, 0.5);
}
.b.confirmed {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 255, 1);
}

<div class="a confirmed">Confirmed</div>
<div class="a unconfirmed">Unconfimed</div>

<div class="b confirmed">Confirmed</div>
<div class="b unconfirmed">Unconfimed</div>

仅更改＆＃39; a＆＃39;在css类中的rgba

1 个答案:

实施例