如何将透明颜色转换为rgb答案

【问题标题】：How to convert transparent colors to rgb如何将透明颜色转换为rgb
【发布时间】：2017-03-21 00:57:03
【问题描述】：

我有以下格式的颜色

backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',

                    ],

它们是透明的颜色，但是当我将它们转换成这个时：

backgroundColor: [
                        getRandomColor(),
                        getRandomColor(),

                    ],

它们不再透明。

function getRandomColor() {
        var letters = '0123456789ABCDEF';
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

谁能帮帮我，谢谢。

【问题讨论】：

getRandomColor 返回HEX，而不是rgba
是的，那我该怎么办？
参考Transparent ARGB hex value
getRandomColor() 正在生成十六进制颜色代码，但透明度来自添加额外的“alpha”通道（rgba 值和getRandomColor() 中的最后一个值不会生成或应用该 alpha 通道值.

标签： javascript

【解决方案1】：

您只需为红色、绿色、蓝色返回 3 个不同的值，介于 0 和 255 之间......

edit ：并使用 rgba，指定颜色的不透明度。

rgba(red,green,blue,a lpha=不透明度）。

function getRndColor()
{
 return "rgba("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+",0.2)";
}

console.log(getRndColor());

【讨论】：

【解决方案2】：

十六进制（示例）：#42dff4 不透明

RGB（示例）：rgb(100,42,230) 不透明

RGBA（示例）：rgba(123,42,243,0.5) 透明

getRandomColor() 以 HEX 值返回颜色。 HEX 值始终是不透明的。如果您想要随机 rgba 颜色值（透明），请执行以下操作：

function getRandomColor() {
return "rgba(" + Math.floor(Math.random() * 255) + ","
                  + Math.floor(Math.random() * 255) + ","
                  + Math.floor(Math.random() * 255) + ",0.2)";

}

这将返回一个 rgba 值，这是您要查找的代码。

【讨论】：

【解决方案3】：

您可能应该坚持最初使用的 rgba 格式，因为您无法使用十六进制表示法指定 alpha 通道。因此，您的代码必须再次运行才能将其从十六进制转换回 rgba 并添加 alpha 值。

看这个例子，它随机化了所有四个 (rgba) 组件：

function getRandomColor() {
        var color = [];
        for (var i = 0; i < 3; i++ ) {
            color.push(Math.floor(Math.random() * 256));
        }
        color.push(Math.random()); // alpha
        return 'rgba(' + color.join(',') + ')';
    }

div {text-align: center; margin: 20px 0; font-size: 40px;text-shadow: 0 0 1px #000; color: #ff0;cursor:pointer}
div:hover {text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 4px #000}
body {background: url(https://thumbs.dreamstime.com/x/retro-tile-background-5479386.jpg)}

&lt;div onclick="this.style.background = getRandomColor()"&gt;Click me&lt;/div&gt;

当然，您可以将其修改为仅随机化 RGB 分量并手动添加 alpha，以防您希望将其锁定为 0.2。

【讨论】：

【解决方案4】：

如何将透明色转为rgb？

这是一个可以将 rgba 转换为 rgb 的函数：

var backgroundColor = [
  'rgba(255, 99, 132, 0.2)',
  'rgba(54, 162, 235, 0.2)'
]

function RGBfromRGBA(rgba) {
  const [r, g, b, per] = rgba.match(/[0-9\.]+/g)

  const diff = Number(per)

  return `rgb(${ channelInter(Number(r),diff) },${channelInter(Number(g),diff) },${channelInter(Number(b),diff)})`

}

function channelInter(v, p) {
  return 255 - (255 - v) * p | 0
}

var res = RGBfromRGBA(backgroundColor[1])

$('#rgba').css('background', backgroundColor[1]).html(backgroundColor[1])
$('#rgb').css('background', res).html(res)

div {
  height: 100px;
  width: 100px;
  margin: 10px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='rgba'></div>
<div id='rgb'></div>

在sn-p中我也做了一个小测试，看起来还可以，告诉我进展如何；

【讨论】：