jQuery设置CSS背景不透明度

Question

我有一个<div>透明的背景颜色(而不是它的内容),我想改变.远程API发送给我这种颜色:

#abcdef

我告诉jQuery(1.9)通过.css以下方式应用这种颜色:

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

结果div的background-color样式不是#abcdef,而是相同颜色的RGB表示.

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

(只是观察;不是问题的一部分)

---

项目要求已经改变,我现在还需要将背景的透明度改为设定的百分比(50%).background-color因此,我想要的属性

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

但是,我找不到使用jQuery(十六进制颜色代码)设置此背景颜色属性的方法,并仍然应用alpha值.opacity影响div的内容以及背景,所以它不是一个选项.

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

给定字符串#abcdef,是否只有通过计算(例如hex2dec)才可以将背景不透明度应用于div,如果我只给出一个十六进制颜色字符串？

Answer 1

尝试parseInt(hex,16)将十六进制字符串转换为十进制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)

你应该创建一个函数来在你的应用程序中使用.

Answer 2

你可以试试这个

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

这里有一个例子.