十六进制color颜色/RGBA/RGB，改变透明度

最新推荐文章于 2023-12-13 15:14:31 发布

唐月123456

最新推荐文章于 2023-12-13 15:14:31 发布

阅读量195

点赞数

文章标签： javascript 前端颜色转变

本文链接：https://blog.csdn.net/weixin_39054337/article/details/131441696

版权

/**
 * 十六进制color颜色/RGBA/RGB，改变透明度
 * @param {*} thisColor #555 rgba(85,85,85,0.6) rgb(85,85,85)
 * @param {*} thisOpacity 0.7
 * @returns rgba(85,85,85,0.7)
 */
export function getOpacityColor(thisColor, thisOpacity){
  var theColor = thisColor.toLowerCase();
  //十六进制颜色值的正则表达式
  var r = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 如果是16进制颜色
  if (theColor && r.test(theColor)) {
    if (theColor.length === 4) {
      var sColorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        sColorNew += theColor.slice(i, i + 1).concat(theColor.slice(i, i + 1));
      }
      theColor = sColorNew;
    }
    //处理六位的颜色值
    var sColorChange = [];
    for (var j = 1; j < 7; j += 2) {
      sColorChange.push(parseInt("0x" + theColor.slice(j, j + 2)));
    }
    return "rgba(" + sColorChange.join(",") + "," + thisOpacity + ")";
  }
  // 如果是rgba或者rgb
  if (theColor.startsWith("rgb")) {
    let numbers = theColor.match(/(\d(\.\d+)?)+/g);
    numbers = numbers.slice(0, 3).concat(thisOpacity);
    return "rgba(" + numbers.join(",") + ")";
  }

  return theColor;
};