继承颜色但覆盖不透明度/透明度

Question

是否可以继承颜色但覆盖不透明度值？这是伪CSS 中的一个示例：

.color-class {
    background-color: rgba(255, 0, 0, 0);
}

.lighten {
    background-color: rgba(inherit, inherit, inherit, .4);
}

应用于

<div style="color-class">I am red</div>
<div style="color-class lighten">
    I am red and a little bit transparent
</div>

应该导致一个有色元素，另一个是相同（继承）的颜色，但增加了透明度。

我基本上想要一个 CSS 类，可以在不更改颜色值的情况下使背景颜色变亮（或变暗）。

Answer 1

解决方案是使用伪元素作为背景并简单地控制其不透明度：

div {
  padding: 40px;
}

.color-class {
  position: relative;
}

.color-class:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgb(255, 0, 0);
  opacity: 1;
  z-index:-1;
}

.lighten:before {
  opacity: 0.5;
}

<div class="color-class">I am red</div>
<div class="color-class lighten">
  I am red and a little bit transparent
</div>