jQuery设置CSS背景不透明度

Posted 2023-03-06

【中文标题】jQuery设置CSS背景不透明度

【英文标题】：jQuery set CSS background opacity

【发布时间】：2013-11-08 21:58:06

【问题描述】：

我有一个<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？

【问题讨论】：

我认为您不能使用十六进制值设置 bg 不透明度。您可以将十六进制拆分为值对并将其转换为十进制，这样您就可以即时创建 rgba 设置，但它不会漂亮。

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

@RoryMcCrossan 试过 $('div').css('background-color', '#abcdef77') -- jQuery 没有被愚弄。呵呵。

您不能使用十六进制值设置 bg 不透明度，您的选择是使用 rgba 或小 png。 RGBA 是最好的，如果您需要满足 ie7 的需求，那么 CSS3 Pie 将在该部门为您提供帮助

你是对的@RecoveringSince2003，你的建议是唯一可行的，如果只有 API 为我提供了那个值。它没有......所以这个问题存在。 @-影响内容不透明度的两个代码。

【参考方案1】：

你可以使用这个 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！我在我的网站上使用了您的代码的修改版本。谢谢！

【参考方案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.

【讨论】：

鉴于我的情况，两种（类似的）解决方法都必须这样做。谢谢！

IE11 可能会破坏我的 ie8 过滤器。在这里开始线程：***.com/questions/29926860/…

不透明度主要表现为0.5而不是50。所以代码要改成接受convertHex('#A7D136', 0.5)，最后一行要改成：result = 'rgba('+r+','+g+','+b+','+ opacity + ')';

【参考方案3】：

这应该适合你。 它确实假定您传递的是有效的 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 上查看此示例

【参考方案4】：

尝试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)

您应该从中创建一个函数以在您的应用程序中使用。

【讨论】：

鉴于我的情况，两种（类似的）解决方法都必须这样做。谢谢！

这个答案很好！