jQuery设置CSS背景不透明度
我有一个
,它的背景颜色 (而不是它的内容)的透明度我想改变。 远程API发送给我这种颜色:
#abcdef
我告诉jQuery(1.9)通过.css
应用这种颜色:
$('div').css('background-color', '#abcdef');
生成的div具有不是#abcdef
的background-color
样式,而是具有相同颜色的RGB表示。
background-color: rgb(171, 205, 239);
(只是观察;不是问题的一部分)
项目要求已经改变,我现在还需要将背景的透明度改为设定的百分比(50%)。 因此,我想要的background-color
属性
background-color: rgba(171, 205, 239, 0.5);
但是,我找不到使用jQuery(hex颜色代码)设置此背景颜色属性的方法,并仍然应用alpha值。 opacity
会影响div的内容以及背景,因此它不是一个选项。
$('div').css('background-color', '#abcdef') .css('opacity', 0.5); // undesirable opacity changes to div's content
给定字符串#abcdef
,是否只有通过计算(例如hex2dec)才可以将背景不透明度应用于div,如果我只给出一个hex颜色字符串?
尝试使用parseInt(hex,16)
将hex字符串转换为十进制int
所以在这种情况下,它将是:
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)
你应该创建一个函数来在你的应用程序中使用。
你可以试试这个
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));
这里有一个例子。
你可以使用这个javascript助手函数
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; }
这应该适合你。 它假设您传递的是有效的6位hex代码和不透明度,并且不进行错误检查。
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));
您可以在jsFiddle上查看此示例