jQuery设置CSS背景不透明度

Question

我有一个 <div>，我想改变它的背景颜色（而不是内容）的透明度。一个远程API向我发送了这种颜色：

#abcdef

然后我告诉jQuery（1.9）通过.css应用这种颜色：

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

生成的

元素的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应用背景透明度？

- Brian

---

我认为你不能使用十六进制值来设置背景透明度。你可以将十六进制值拆分成数值对，并将其转换为十进制，以便可以即时创建rgba设置，但这不会很美观。 - Rory McCrossan

这个 $('div').css('background-color', 'rgba(171, 205, 239, 0.5)') 有什么问题吗？ - The Alpha

@RoryMcCrossan 尝试 $('div').css('background-color', '#abcdef77') -- jQuery 不会被愚弄。嘿。 - Brian

另外，您可以将div的内容嵌入到具有透明背景和100％不透明度的另一个div中，那么原始div的不透明度将不会影响内容。 - mas.morozov

@Brian 请查看这个问题的答案 - 它展示了如何将十六进制转换为RGBA。然后您可以提供自己的不透明度值。 - Rory McCrossan

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)

你应该将这个内容封装成一个函数，以在你的应用程序中使用。

- Pranav Gupta

---

鉴于我的情况，这两个（类似的）解决方法都能够使用。谢谢！ - Brian

那真是一个漂亮的答案！ - S.J. Lim

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

这里有一个例子。

- The Alpha

---

考虑到我的情况，这两种（类似的）解决方法都可以。谢谢！ - Brian

IE11 可能正在损坏我的 IE8 滤镜。 在这里开启了一个线程：http://stackoverflow.com/questions/29926860/jquery-dynamic-background-alpha-in-ie8-ms-filter - Jen

不透明度通常表示为“0.5”而不是“50”。因此，代码应更改为接受“convertHex（'#A7D136'，0.5）”，并且最后一行应更改为：“result ='rgba（'+ r +','+ g +','+ b +','+ opacity +'）';”。 - Aleks

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

- Ruwen

---

不错的函数，@Ruwen！我在我的网站上使用了你修改过的代码。谢谢！ - Dan Robinson

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上查看示例

- Martin