我正试图从colorArr中获得一个随机渐变。我有这个代码：
const colorArr = [
"#e5e2ff",
"#ffd3e1",
"#c7f7dc",
"#fdfdbd",
"#ff8787",
];
const getRandomColor = () => {
return colorArr[Math.floor(Math.random() * colorArr.length)];
};
它完美地挑选了随意的素色。
当我使用这样的东西时：
const colorArr = [
"linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%)",
"linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%)",
"linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%)",
"linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%)",
"linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%)",
];
它给我的是白色背景，而不是实际的渐变。
您需要使用background-image来使用linear-gradient而不是backgroundColor
请尝试以下代码。
const colorArr = [
"linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%)",
"linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%)",
"linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%)",
"linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%)",
"linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%)",
];
const getRandomColor = () => {
return colorArr[Math.floor(Math.random() * colorArr.length)];
};
const div = document.querySelector("div");
div.style.backgroundImage = getRandomColor();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 100px; height: 100px"></div>
</body>
</html>