如何将CSS alpha应用于继承的背景色？

如果我有

.parent {
    background-color: #000;
}

.child {
    // the background from the parent with an alpha
    // background-color: inherit + alpha
}

我可以对继承的背景色应用alpha吗

<div class="parent">
    <div class="child">this is the child</div>
</div>  

这就是那个孩子

---

据我所知，唯一的方法是传递颜色rgba（255，0，0，0.3）；}关于如何实现这一点有什么想法吗？谢谢

我在css中添加了一些行，这样您就可以看到差异。我用css标记了重要的行。我试着解释，但我的英语不太好：）如果我的句子有误，很抱歉：）

.parent{
--r:0；/*设置r变量*/
--g:0；/*设置g变量*/
--b:0；/*设置b变量*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：rgb（var（--r）、var（--g）、var（--b））；/*将rgb颜色与变量一起使用*/
宽度：100%；
高度：100px；
}
.孩子{
显示器：flex；
背景色：rgba（var（--r）、var（--g）、var（--b）、0.5）；/*将rgba颜色与父变量一起使用*/
颜色：白色；
宽度：25%；
高度：50px；
文本对齐：居中；
对齐项目：居中；
证明内容：中心；
边缘顶部：100px；
}

这就是那个孩子

我在css中添加了一些行，以便您可以看到差异。我用css标记了重要的行。我试着解释，但我的英语不太好：）如果我的句子有误，很抱歉：）

.parent{
--r:0；/*设置r变量*/
--g:0；/*设置g变量*/
--b:0；/*设置b变量*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：rgb（var（--r）、var（--g）、var（--b））；/*将rgb颜色与变量一起使用*/
宽度：100%；
高度：100px；
}
.孩子{
显示器：flex；
背景色：rgba（var（--r）、var（--g）、var（--b）、0.5）；/*将rgba颜色与父变量一起使用*/
颜色：白色；
宽度：25%；
高度：50px；
文本对齐：居中；
对齐项目：居中；
证明内容：中心；
边缘顶部：100px；
}

这就是那个孩子

只要继承了相同的颜色，alpha就没有效果：）-但我理解您想要什么-我希望示例有用

div{
背景色：#000；
宽度：200px；
高度：150像素；
}
p组{
背景色：继承；
位置：相对位置；
文本对齐：居中；
}
跨度{
位置：相对位置；
字体大小：25px；
字体大小：粗体；
文本对齐：居中；
颜色：#f00；
文本转换：大写；
z指数：1；
填充：10px；
显示：内联块；
}
分区p：：之后{
内容：''；
不透明度：0.2；/*此处为alpha*/
背景色：#fff；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
z指数：0；
}

试验

只要继承了相同的颜色，alpha就没有效果：）-但我理解您想要什么-我希望示例有用

div{
背景色：#000；
宽度：200px；
高度：150像素；
}
p组{
背景色：继承；
位置：相对位置；
文本对齐：居中；
}
跨度{
位置：相对位置；
字体大小：25px；
字体大小：粗体；
文本对齐：居中；
颜色：#f00；
文本转换：大写；
z指数：1；
填充：10px；
显示：内联块；
}
分区p：：之后{
内容：''；
不透明度：0.2；/*此处为alpha*/
背景色：#fff；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
z指数：0；
}

试验

下面是一个使用伪元素并依赖继承的想法。诀窍是考虑颜色的渐变项：

.parent{
高度：100px；
背景：线性渐变（#45f2060）；/*我们需要渐变，而不是颜色，才能让技巧发挥作用*/
}
.孩子{
填充：30px；
背景：继承；
背景大小：0；/*这对于避免孩子获得颜色非常重要*/
位置：相对位置；
z指数：0；
transform:translateY（90px）；/*来说明*/
}
.孩子：以前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
背景图像：inherit；/*我们从从父对象获取颜色的子对象获取颜色*/
不透明度：0.5；/*此处的不透明度*/
}

这就是那个孩子

下面是一个使用伪元素并依赖继承的想法。诀窍是考虑颜色的渐变项：

.parent{
高度：100px；
背景：线性渐变（#45f2060）；/*我们需要渐变，而不是颜色，才能让技巧发挥作用*/
}
.孩子{
填充：30px；
背景：继承；
背景大小：0；/*这对于避免孩子获得颜色非常重要*/
位置：相对位置；
z指数：0；
transform:translateY（90px）；/*来说明*/
}
.孩子：以前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
背景图像：inherit；/*我们从从父对象获取颜色的子对象获取颜色*/
不透明度：0.5；/*此处的不透明度*/
}

这就是那个孩子

您想要的最终结果是什么？子对象将从父对象继承背景色，但带有一些alpha。您想要的最终结果是什么？子对象将从父对象继承背景色，但带有一些alpha。我发现的唯一问题是，我无法轻松将alpha应用于十六进制值：（你是对的，但我没有回答：）我试着想办法找到解决方案：）我试着找出是否可以直接添加透明度，比如

背景色：var（--背景色）+“e8”但它不起作用你不能在css中这样做：）：）你可以在预处理器中计算颜色，然后为孩子变亮（颜色，50%）。我发现的唯一问题是我不能轻松地将alpha应用于十六进制值：（你是对的，但我没有答案：）我试着想办法找到解决方案：）我试着找出是否可以直接添加透明度，比如
背景色：var（--背景色）+“e8”但它不起作用你不能在css中这样做：）：）你可以