如何在 CSS 中创建随机 RGBA 颜色？

Posted 2023-02-25

【中文标题】如何在 CSS 中创建随机 RGBA 颜色？

【英文标题】：How to create a random RGBA color in CSS?

【发布时间】：2017-02-20 16:52:27

【问题描述】：

大家！ 我想知道如何使用 CSS 创建随机 RGBA 颜色： 我想要随机的 css 值是这样的：

-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

【问题讨论】：

这不能仅使用 CSS 来完成。您必须使用 javascript 来实现这一点。

【参考方案1】：

你不能只使用 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 的答案之一。

【参考方案2】：

不幸的是，仅使用 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