Question

我有一个<div>，其 background-color （而不是其内容）的透明度我想改变。远程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)将十六进制字符串转换为十进制整数

所以在这种情况下，它将是：

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

An example here.

Answer 3

您可以使用此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;
}

Answer 4

这对你有用。它假设您传递的是有效的6位十六进制代码和不透明度，并且不进行错误检查。

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 here

上查看此示例

jQuery设置CSS背景不透明度

4 个答案: