Question

我有以下格式的颜色

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

任何人都可以帮助我，谢谢。

Answer 1

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

参见这个例子，它随机化了所有四个（rgba）组件：

＆＃13;

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(',') + ')';
    }

＆＃13;

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

＆＃13;

<div onclick="this.style.background = getRandomColor()">Click me</div>

＆＃13;

当然，您可以将其修改为仅随机化RGB组件并手动添加Alpha，以防您将其锁定为0.2。

Answer 2

HEX（示例）：＃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值，这是您要查找的代码。

Answer 3

如何将透明色转换为rgb？

这是一个应该将rgba转换为rgb的函数：

＆＃13;

CartController.php

＆＃13;

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)

＆＃13;

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

＆＃13;

在摘录中我也进行了一些测试，看起来没问题，让我知道它是怎么回事;

Answer 4

你必须在0到255之间为红色，绿色，蓝色返回3个不同的值....

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

<强> RGBA （适用的 - [R 版，的克颖，的 B'/强>略，的一 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());

如何将透明色转换为rgb

4 个答案: