tkane tkane - 1 month ago 12
CSS Question

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

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

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.

Comments