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

Posted 2023-02-21

【中文标题】如何在卡片背景中设置多种不同的颜色

【英文标题】：How to set many different color in card background

【发布时间】：2021-12-13 06:26:00

【问题描述】：

sample image

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

【参考方案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>
  );