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

Question

我有一对彼此相邻的，我想与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来影响文本的不透明度。

这可能吗？

Answer 1

我相信没有办法做到这一点。

Css本身非常有限，你可以用它做很多事情。

您可以添加不透明度的唯一途径是：

opacity: 0.5 

但上面也将影响文本本身，不仅是背景。

但是，您可以将它包裹起来，将背景块与文本分开，以便保持文本的颜色不变。

编辑：见琴：http://jsfiddle.net/YfSn7/30/

但这种情况可能看起来有点可笑，所以我不会过多的使用建议。

如果你真的想让事情变得更简单，而不是过度复杂化，那么你会不得不接受这是不可能的。

Answer 2

没有办法做到这一点，值的过度重复是CSS的失败之一。

所以如果你的标准颜色是rgba(0,0,0,1);那么你需要rgba(0,0,0,0.5);作为透明的版本。

你也许可以做一些像这样的客户端JavaScript的一些东西，但这并不完全干净。

Answer 3

它可以使用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 + ')'; 

}