How to change background (not text) color opacity with javascript?

Question

I'd like to take an existing background color of a div element and only adjust opacity... how would I do that?

---

Found very simple solution to my problem; requires jquery-color plugin but it's by far the best solution in my opinion:

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

Answer 1

Opacity is tricky because there's still no cross-browser supported mechanism, even though its supposed to be in CSS3.

What you most likely want to do is change the background-color style's alpha channel. See: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

---

Someone has developed a JQuery plugin that does just what you want: http://archive.plugins.jquery.com/project/backOpacity

With this plugin, you can control just the "back opacity" without affecting child elements.

Answer 2

The query-color plugin is a nice solution, however I strongly believe you do not need to overload your app with unnecessary plugins for such an easy and simple task.

Here is another approach using strings:

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);

Here is a jsFiddle example of how to use it.

I had a similar problem and it made the magic for me.