JQuery set CSS background opacity

Question

I have a <div> transparency of its background color (and not its contents) that I would like to change. The remote API sends me this color:

 #abcdef 

and I will tell jQuery (1.9) to apply this color via .css :

 $('div').css('background-color', '#abcdef'); 

The resulting div has a background-color style of not #abcdef , but rather its RGB representation of the same color.

 background-color: rgb(171, 205, 239); 

(Just observation, not part of the problem)

---

The requirement for the project has been changed in such a way that now I will also need to change the transparency of the background to the set percentage (50%). So my desired background-color attribute

 background-color: rgba(171, 205, 239, 0.5); 

however, I cannot find a way to set this background-color attribute using only jQuery, a hexadecimal color code, and still apply an alpha value. opacity affects the contents of the div as well as the background, so this is not an option.

 $('div').css('background-color', '#abcdef') .css('opacity', 0.5); // undesirable opacity changes to div content 

Given the line #abcdef , is it only possible to calculate (e.g. hex2dec) that I can apply the opacity of the background to the div if I only get the hex color string?

Answer 1

try parseInt(hex,16) convert hex string to decimal int

so in this case it will be:

 var color = '#abcdef'; var rgbaCol = 'rgba(' + parseInt(color.slice(-6,-4),16) + ',' + parseInt(color.slice(-4,-2),16) + ',' + parseInt(color.slice(-2),16) +',0.5)'; $('div').css('background-color', rgbaCol) 

you should create a function from this for use in your application.

Answer 2

You can try this

 function convertHex(hex,opacity){ hex = hex.replace('#',''); r = parseInt(hex.substring(0,2), 16); g = parseInt(hex.substring(2,4), 16); b = parseInt(hex.substring(4,6), 16); result = 'rgba('+r+','+g+','+b+','+opacity/100+')'; return result; } $('h1').css('background', convertHex('#A7D136', 0.5)); 

An example is here.

Answer 3

You can use this javascript helper function

 function setColorOpacity(colorStr, opacity) { if(colorStr.indexOf("rgb(") == 0) { var rgbaCol = colorStr.replace("rgb(", "rgba("); rgbaCol = rgbaCol.replace(")", ", "+opacity+")"); return rgbaCol; } if(colorStr.indexOf("rgba(") == 0) { var rgbaCol = colorStr.substr(0, colorStr.lastIndexOf(",")+1) + opacity + ")"; return rgbaCol; } if(colorStr.length == 6) colorStr = "#" + colorStr; if(colorStr.indexOf("#") == 0) { var rgbaCol = 'rgba(' + parseInt(colorStr.slice(-6, -4), 16) + ',' + parseInt(colorStr.slice(-4, -2), 16) + ',' + parseInt(colorStr.slice(-2), 16) + ','+opacity+')'; return rgbaCol; } return colorStr; } 

Answer 4

This should work for you. It assumes that you pass a valid six-digit hexadecimal code and opacity and does not perform error checking.

 function hex2rgba(hex, opacity) { //extract the two hexadecimal digits for each color var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/; var matches = patt.exec(hex); //convert them to decimal var r = parseInt(matches[1], 16); var g = parseInt(matches[2], 16); var b = parseInt(matches[3], 16); //create rgba string var rgba = "rgba(" + r + "," + g + "," + b + "," + opacity + ")"; //return rgba colour return rgba; } $(".box").css("background-color", hex2rgba("#ABCDEF", 0.6)); 

You can see an example of this on jsFiddle here