如何在卡片背景中设置多种不同的颜色答案

【问题标题】：How to set many different color in card background如何在卡片背景中设置多种不同的颜色
【发布时间】：2021-12-13 06:26:00
【问题描述】：

sample image

我怎样才能像这张图片一样在卡片背景中设置多种不同的颜色？我使用 html、css、js、react js...请帮助我

【问题讨论】：

标签： css reactjs background-color card

【解决方案1】：

最简单的方法是创建一个颜色数组。例如

const colors = ['red', 'blue'];

然后对于每张卡片，您可以从颜色数组中随机选择一种颜色，并通过内联样式将其设置为背景颜色。一个简单的版本：

const colors = ["red", "blue"];

// pick random color from colors
const randomColor = colors[Math.floor(Math.random() * colors.length)];

// set background color to random color

<div style={{
    backgroundColor: randomColor
}}>
    
</div>

【讨论】：

【解决方案2】：

export default function App() {
  const colors = ["blue", "red", "brown", "black", "yellow"];
  return (
    <div className="App">
      <div style={{ display: "flex" }}>
        {colors.map((item, index) => {
          return (
            <div
              key={index}
              style={{
                height: "100px",
                width: "100px",
                backgroundColor: item,
                marginLeft: "10px"
              }}
            ></div>
          );
        })}
      </div>
    </div>
  );
}

【讨论】：