Geek Answers Handbook

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

I would like to take the existing background color of the div element and just adjust the opacity ... how would I do this?

Found a very simple solution to my problem; requires a jquery-color plugin, but this is by far the best solution in my opinion:

$('#div').css('backgroundColor', $.Color({ alpha: value }));
+5
source share
4 answers

Opacity is complex because there is still no support mechanism supported by all browsers, although it is assumed that it should be in CSS3.

What you most likely want to do is change the alpha channel of the style background-color. See: 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

" ", .

+6

query-color - , , .

:

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 , .

, .

+4

x.xxx 1,

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

1 .

Please note that your color must be in the format "rgba (100, 100, 100, 0.85098)" from the very beginning

0
source

Download the background image or color in Photoshop and reduce the opaity there and save it as a .jpeg image, and then use it as a background in HTML.

Just like this ....: D

-1
source

More articles:


All Articles