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

Question

样本图片

我如何在像这样的卡片背景中设置许多不同的颜色?我用html, css, js, react js…请帮帮我

Answer 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>

Answer 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>
);
}