將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 + ')'; 

}