透明的div背景，色彩的色調？

Question

任何人都可以告訴我如何使一個div的背景透明，但有一個顏色，如黑色的色彩。我試過這個使用CSS，雖然我只能讓div是透明的或填充顏色。
感謝您的幫助！

Answer 1

有opacity按佩卡的答案，但它會使DIV透明，以及背景的內容。如果這不是你想要的，你可以：

1. 有兩個div，一個有作爲背景的不透明度/α，而另一個固體一個定位在它上面的內容。然而，對於可變大小的元素來說，定位可能會很棘手。或者，

2. 使用半不透明的背景，或者通過使用rgba() colour（在比IE其他瀏覽器）的，或與α-信道（這在IE7-8工作，但需要一個AlphaImageLoader修復的IE6一個PNG背景圖像，這也意味着你必須使圖像儘可能大，因爲AlphaImageLoader不會平鋪）。

Answer 2

您可以使用opacity（及其IE瀏覽器同級alpha）。

Quirksmode.org有一個如何在大多數瀏覽器中始終如一地實現這一目標的好列表。

Answer 3

或者您可以使用PNG半透明圖像。通常是最簡單的出路，因爲在玩opacity時也會改變文字的不透明度。

Answer 4

http://www.w3schools.com/Css/css_image_transparency.asp有一些例子

Answer 5

還有一個選項（雖然在所有瀏覽器中都不支持）。使用rgba（）：

/* apply a shade of seafoam green (50% transparent) to "tinted" class */ 
.tinted {  
    background-color: rgba(129,254,188,0.5); 
} 

這裏有一個不錯的easy to read article在幾個方法。

如果你不關心IE6，事情會變得更容易。

Answer 6

這裏是一個jQuery插件，將處理你的一切，Transify http://jorenrapini.com/blog/css/transify-a-jquery-plugin-to-easily-apply-transparency-opacity-to-an-elements-background

我跑了這個問題飄飛，所以我決定寫一些東西，會讓生活變得更加簡單。腳本小於2kb，它只需要1行代碼就可以使其工作，並且如果您願意，它還可以處理動畫背景的不透明度。