Css 将alpha通道添加到给定颜色

我有两个相邻的，我想用CSS样式。我想为背景应用多种颜色，但我希望较低的颜色与不透明度降低的颜色相同，因此我想到：

span.foo{
    background-color: rgba(0,0,0,1); /*or whatever*/
    color:white;
}

span.foo:last-child{
    background-color: rgba(*,*,*,0.5); /*just an example*/
}

因此，我想通过使用CSS3更改已经定义的背景的不透明度，而不影响文本的不透明度

---

这可能吗？

我认为没有办法做到这一点

Css本身是非常有限的，并且你不能用它做很多事情

添加不透明度的唯一方法是：

opacity: 0.5

但上述内容也会影响文本本身，而不仅仅是背景

但是，您可以将其包装为将背景块与文本分开的方式，以便保持文本的颜色不变

编辑：查看小提琴：

但这看起来可能有点可笑，所以我不会用它给你太多建议

---

如果你真的想让事情变得更简单而不是过于复杂，那么你可能不得不承认这是不可能的。

没有任何方法可以做到这一点，值的过度重复是CSS的失败之一

因此，如果您的标准颜色是

rgba（0,0,0,1）然后需要
rgba（0,0,0,0.5）作为透明版本

您也许可以使用一点javascript在客户端执行类似的操作，但这并不完全干净。
可以使用javascript完成，如下所示：

adjustHexOpacity (color, opacity) {
  const r = parseInt(color.slice(1, 3), 16);
  const g = parseInt(color.slice(3, 5), 16);
  const b = parseInt(color.slice(5, 7), 16);

  return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')';

}如果您有Sass：

background-color: rgba(white, 0.5);

如果您想使用现代CSS：

--color_rgb: 0, 0, 0;
background-color: rgba(var(--color_rgb), 0.5));

但是仍然无法将alpha添加到给定的颜色中，如“其他样式表在RGB、十六进制或其他颜色中应用了此颜色”。
您可以使用CSS变量：

span.foo{
--背景色：0,0,0；
背景色：rgba（var（--背景色），1）；
颜色：白色；
}
斯潘·福：最后一个孩子{
背景色：rgba（var（--背景色），0.5）；
}
Hi，您可以尝试使用过滤器，检查此链接中的少量颜色，使用类似的工具为您转换颜色可能是最快的。粘贴在你的十六进制颜色中，例如#23a，它会给你rgb（34，51，170），所以只需添加你想要的alpha量，比如rgba（34，51，170，0.2）（其中0是透明的，1是不透明的）。但我同意，如果alpha可以单独使用CSS添加到十六进制颜色中，而不需要重新格式化为RGB，那就太好了。