如何在CSS中更改背景顏色的不透明度

Question

我有一個PNG文件，我給它的透明區域添加背景顏色，但是我想讓背景顏色有點透明，就像不透明一樣。這是我到目前爲止的代碼：

social img{ 
    opacity:0.5; 
} 
.social img:hover { 
    opacity:1; 
    background-color:black; 
} 

Answer 1

background: rgba(0,0,0,.5); 

你可以使用RGBA的透明度，只會在IE9 +和更好的瀏覽器

Answer 2

使用RGBA這樣的工作：background-color: rgba(255, 0, 0, .5)

Answer 3

使用RGB值與不透明度結合以獲得您希望的透明度。

例如，

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0) ; opacity: 1;">&nbsp;</div> 

同樣，沒有透明度的實際值，將給予以下。

<div style=" background: rgb(243, 191, 189) ; ">&nbsp;</div> 
<div style=" background: rgb(246, 143, 142) ; ">&nbsp;</div> 
<div style=" background: rgb(249, 95 , 94) ; ">&nbsp;</div> 
<div style=" background: rgb(252, 47, 47) ; ">&nbsp;</div> 
<div style=" background: rgb(255, 0, 0)  ; ">&nbsp;</div> 

你可以看看這個WORKING EXAMPLE。

現在，如果我們專門針對您的問題，這裏是WORKING DEMO SPECIFIC TO YOUR ISSUE。

的HTML

<div class="social"> 
    <img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" /> 
</div> 

的CSS：

social img{ 
    opacity:0.5; 
} 
.social img:hover { 
    opacity:1; 
    background-color:black; 
    cursor:pointer; 
    background: rgb(255, 0, 0) ; opacity: 0.5; 
} 

希望這有助於現在。

Answer 4

不太確定通過CSS添加不透明度是一個好主意。
不透明度有一種有趣的方式應用於所有內容和您設置的孩子，並且顏色混合出現意想不到的結果。
在我看來，在這種情況下，它沒有真正的目的，對於bg顏色。
如果你想讓它懸停在bg圖像上，那麼你可以使用多個背景。
這種顏色透明可經由重複一個額外的PNG被applyed（或不與背景位置），
CSS梯度（radial-）線性梯度以RGBA顏色（開始，以相同的顏色結尾）可以實現這也是。它們被視爲背景圖像，可以用作過濾器。
同樣的文本，如果你想讓它們有點透明，使用rgba（好吧，把文字陰影放在一起）。

我認爲今天我們可以放棄CSS不透明的有趣行爲。

這裏是一個混合使用不透明RGBA的，如果你是好奇dabblet.com/gist/5685845

Answer 5

使用RGBA作爲最常用的瀏覽器支持的話..

.social img:hover { 
background-color: rgba(0, 0, 0, .5) 
}