如何从数组中选择背景渐变？onload随机设置渐变失效排查

问题根源 #

你数组里的每个样式字符串都混入了color: xxx;属性——这是用于设置文本颜色的，不能放在background样式值里。浏览器解析到无效的background值时会直接忽略，因此页面显示默认的白色背景。

修复方案 #

方案1：仅设置随机背景渐变

修改数组，只保留渐变部分即可：

<html>
  <script>
    const gradients = [
      "linear-gradient(to top, #e0eafc, #cfdef3)",
      "linear-gradient(to top, #eecda3, #ef629f)",
      "linear-gradient(to top, #00d2ff, #928dab)"
    ];
    
    function setRandomGradient() { 
      document.body.style.background = gradients[Math.floor(Math.random()*gradients.length)];
    }
  </script>

<body onload="setRandomGradient()">
    <h1>Game Library</h1>
    <div class="game">
      <a href="/games/1"><img src="/icons/game1.png" alt="Game 1"></a>
      <p>Madalin stunt cars 2</p>
    </div>
  </body>

<style>
    body {
  font-family: custom;
  margin: 0;
  padding: 0;
  height: 100vh; /* 用100vh确保body占满视口高度 */
  background-repeat: no-repeat;
  background-attachment: fixed;
}
</style>
</html>

方案2：同时设置随机背景和文本颜色

如果需要同步改变文本颜色，要分开设置两个样式属性：

<html>
  <script>
    // 用对象存储颜色与渐变的对应关系
    const styleOptions = [
      { color: "blue", gradient: "linear-gradient(to top, #e0eafc, #cfdef3)" },
      { color: "purple", gradient: "linear-gradient(to top, #eecda3, #ef629f)" },
      { color: "green", gradient: "linear-gradient(to top, #00d2ff, #928dab)" }
    ];
    
    function setRandomStyle() { 
      const randomOption = styleOptions[Math.floor(Math.random()*styleOptions.length)];
      document.body.style.color = randomOption.color;
      document.body.style.background = randomOption.gradient;
    }
  </script>

<body onload="setRandomStyle()">
    <h1>Game Library</h1>
    <div class="game">
      <a href="/games/1"><img src="/icons/game1.png" alt="Game 1"></a>
      <p>Madalin stunt cars 2</p>
    </div>
  </body>

<style>
    body {
  font-family: custom;
  margin: 0;
  padding: 0;
  height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
</style>
</html>

额外优化提示 #

• 将body的height: 100%;改为height: 100vh，确保body占满整个视口高度，避免渐变因内容不足而截断。
• 变量名尽量语义化（比如把g改成gradients或styleOptions），提升代码可读性。

内容的提问来源于stack exchange，提问作者Logan