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

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

首先，这将不工作，因为inherit从元素父元素而不是兄弟元素获取值。请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/inherit

其次，inherit关键字是属性值。它不能用作浏览器函数（rgba）的参数，因为函数本身是属性值。

您也不需要努力强制执行继承和可重用性，它通常会使代码膨胀并使其过度设计。

理想情况下，您可以设置一个颜色方案，因此可以选择固定的颜色进行减轻，考虑到您将重新使用它，没有那么多需要尝试使它像这样动态。

如果你真的想要这个功能你可以使用的其他选项是使用SASS / SCSS混合来模仿这种继承，JavaScript也可以是一个替代，但是对于你想要实现的目标，这将是非常有效的

Answer 2

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

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

#social_side_links
    display: none

@media (min-width: 768px) {
    #social_side_links {
        display: inline-block;
    }
}