如何用javascript更改背景（不是文本）顏色不透明度？

Question

我想采用div元素的現有背景顏色，只調整不透明度...我該怎么做？

---

找到了解決我問題的簡單方法; 需要jquery-color插件，但它是我認為最好的解決方案：

$('#div').css('backgroundColor', $.Color({ alpha: value }));

Answer 1

不透明度是棘手的，因為仍然沒有跨瀏覽器支持的機制，即使它應該在CSS3中。

您最想要做的是更改background-color樣式的Alpha通道。 請參閱： http ： //robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

---

有人開發了一個JQuery插件，可以滿足您的需求： http ： //archive.plugins.jquery.com/project/backOpacity

使用此插件，您可以控制“后不透明度”而不會影響子元素。

Answer 2

查詢顏色插件是一個很好的解決方案， 但我堅信你不需要用不必要的插件重載你的應用程序，這樣一個簡單而簡單的任務。

這是使用字符串的另一種方法：

var alpha = "0.8";

var oldBGColor = $('#div').css('backgroundColor');
// rgb(40,40,40)

var newBGColor = oldBGColor.replace('rgb','rgba').replace(')', ','+alpha+')'); 
// rgba(40,40,40,.8)

$('#div').css('backgroundColor', newBGColor);

這是一個如何使用它的jsFiddle示例。

我有類似的問題 ，它為我帶來了魔力。

Answer 3

如果你想從不透明度x.xxx轉到1你可以做到

var element = $("#id")
element.css('backgroundColor', element.css('backgroundColor').replace(/(\d\.?\d*)\s*\)/i, "1") )

按照你想要的值改變1。

請注意，您的顏色需要從一開始就具有“rgba（100,100,100,0.85098）”格式

Answer 4

在Photoshop中上傳背景圖像或顏色並降低其中的不透明度並將其另存為.jpeg圖像，然后將其用作HTML中的背景。

很簡單......：D