我想要用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
但上述内容也会影响文本本身，而不仅仅是背景。
但是，您可以将背景块与文本分开的方式进行包装，这样可以保持文本的颜色不变。
编辑： 看小提琴： http://jsfiddle.net/YfSn7/30/
但这可能看起来有点荒谬，所以我不会建议使用它。
猜猜你必须接受这是不可能的，如果你真的想让事情变得简单而不是过于复杂。
没有任何方法可以做到这一点，过度重复值是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 + ')';
}
如果你想使用现代CSS：
--color_rgb: 0, 0, 0;
background-color: rgba(var(--color_rgb), 0.5));
但是仍然无法将α添加到a 特定 颜色，如“其他一些样式表应用此颜色的RGB，十六进制或其他”。
如果你有Sass：
background-color: rgba(white, 0.5);