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

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>

首先，这不起作用，因为inherit从元素父元素而不是其兄弟元素中取值。请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/inherit
其次，inherit关键字是一个属性值，它不能用作浏览器函数（rgba）的参数，因为函数本身就是一个属性值。
你也不需要如此努力地强制继承和可重用性，这通常会使你的代码膨胀，使它过度工程化。
你最好有一套配色方案，因此能够选择一个固定的颜色变亮，考虑到你会重复使用这个没有太多的需要尝试，使它像这样的动态。
如果你真的想要这个功能，你可以选择使用SASS/SCSS混合来模拟这个继承，JavaScript也可以是一个替代方案，但是对于你试图实现的目标来说，这将是非常低效的。

你可以这样做，只要使用CSS变量。假设你有一个设置了背景的元素，你想改变它的不透明度。

<div class="bg-yellow">Yellow div</div>

添加用于更改不透明度的新类：

<div class="bg-yellow bg-opacity-20">Yellow div</div>

在CSS中：

.bg-yellow {
  --bg-opacity: 1;
  background-color: rgba(255,230,0, var(--bs-opacity));
}
.bg-opacity {
  --bg-opacity: 0.2;
}

"255，230，0"是黄色的...
就是这样，你也可以根据自己的需要随意操纵这个方法。
一个三个三个一个