如何在CSS中創建隨機的RGBA顏色？

-1

大家好！我想知道如何創建一個隨機的RGBA顏色與CSS：的CSS值我想是隨機此的：如何在CSS中創建隨機的RGBA顏色？

-webkit-box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9); 
    -moz-box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9); 
    box-shadow: 0px 3px 0px rgba(14,162,236,1), 0px 3px 6px rgba(0,0,0,.9);

這是我想要是隨機的顏色... enter code here

來源

2016-10-12 Calicol

這隻能用CSS才能完成。你將不得不使用JavaScript來實現這一點。 –

你不能只用CSS，但你可以使用JavaScript。

這裏是這樣做的一種方式：

function rainbow(numOfSteps, step) { 
    // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps. 
    // Adam Cole, 2011-Sept-14 
    // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript 
    var r, g, b; 
    var h = step/numOfSteps; 
    var i = ~~(h * 6); 
    var f = h * 6 - i; 
    var q = 1 - f; 
    switch(i % 6){ 
     case 0: r = 1; g = f; b = 0; break; 
     case 1: r = q; g = 1; b = 0; break; 
     case 2: r = 0; g = 1; b = f; break; 
     case 3: r = 0; g = q; b = 1; break; 
     case 4: r = f; g = 0; b = 1; break; 
     case 5: r = 1; g = 0; b = q; break; 
    } 
    var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2); 
    return (c); 
}

請注意，上面的是不是我的代碼，它只是從答案中的一個在Random color generator in JavaScript拍攝。

來源

2016-10-12 01:46:59

不幸的是，僅僅使用CSS是不可能的。

雖然你可以用一個非常簡單的方式使用javascript和jQuery來實現。

var rgbaArray = ['14,162,236,1','0,0,0,0.9'] // the array containing the colors 
var randomColor = hexArray[Math.floor(Math.random() * hexArray.length)];

當變量中有隨機顏色時，可以更改元素的顏色。

var boxShadowStyle = '0px 3px 0px rgba(' + randomColor + ')' ; 
$("#divID").css("box-shadow", boxShadowStyle); // or .className

來源

2016-10-12 01:53:57

如何在CSS中創建隨機的RGBA顏色？

回答

相關問題