如何转换透明的颜色为rgb

-1

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

        ],

它们是透明的颜色，但是当我把它们转换成这样：

backgroundColor: [ 
         getRandomColor(), 
         getRandomColor(), 

        ],

他们不是透明的了。

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

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

来源

2016-11-07 Naeem

'getRandomColor'返回'HEX'，而不是'rgba' – Rayon

是的，那我该怎么办？ – Naeem

参考[__Transparent ARGB十六进制值___]（http://stackoverflow.com/questions/23201134/transparent-argb-hex-value） – Rayon

HEX（例如）：＃42dff4 NOT透明

RGB（例如）：RGB（100,42,230）NOT透明

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

getRandomColor() retu rns十六进制值的颜色。 HEX值总是不透明的。如果你想随机RGBA颜色值（透明）做到这一点：

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

}

这将返回一个RGBA值，这是你正在寻找的代码。

来源

2016-11-07 16:04:28 Tinsten

你只需要对红，绿，0和255之间的蓝色返回3个不同的值....

编辑：与使用RGBA，为指定颜色的透明度。

RGBA（ř版，克颖，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());

来源

2016-11-07 16:02:21 Alexis

您应该坚持使用最初使用的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)}

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

当然，你可以修改它只是随机的RGB分量和的情况下，手动添加的α-你希望它锁定在0.2。

来源

2016-11-07 16:09:58 Shomz

如何将透明颜色转换为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>

在我还做了一个小测试片断

，它似乎确定，让我知道是怎么回事去;

来源

2016-11-07 16:44:43 maioman

如何转换透明的颜色为rgb

回答

相关问题