如何轉換透明的顏色爲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

回答

相關問題