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

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>