如何使用CSS为网站生成随机背景色？该方案是否可行？

当然可以仅用CSS实现随机背景色，下面是几种实用方案，同时也会解释你之前用随机函数无效的原因：

方案一：利用CSS @property + random() 函数 #

CSS的random()函数目前在现代浏览器中已经支持，但它不能直接写在静态的background-color属性里——这就是你之前尝试无效的核心原因。你需要先通过@property定义一个可动画的CSS变量，再结合random()来生成随机值：

/* 先定义可动画的颜色变量 */
@property --random-bg {
  syntax: '<color>';
  inherits: false;
  initial-value: #ffffff;
}

body {
  /* 使用变量，通过calc结合random生成随机RGB颜色 */
  --random-bg: rgb(calc(random() * 255), calc(random() * 255), calc(random() * 255));
  background-color: var(--random-bg);
}

每次页面刷新时，random()会重新计算，生成新的随机背景色。

方案二：通过动画关键帧触发随机值 #

如果需要兼容更多浏览器，可以用CSS动画的方式：设置一个仅在初始帧生成随机色的动画，然后立即暂停，这样每次刷新都会得到随机背景：

@keyframes random-bg {
  from {
    background-color: hsl(calc(random() * 360), 70%, 80%);
  }
}

body {
  animation: random-bg 0s forwards;
}

这里用hsl()更方便生成柔和的随机色调，你可以调整饱和度和亮度参数来控制颜色风格。

方案三：利用渐变叠加模拟随机色（进阶玩法） #

这种方法不需要依赖random()函数，通过多层线性渐变叠加，结合随机的位置和大小，生成类似随机的背景效果：

body {
  background: 
    linear-gradient(45deg, rgba(random(255),random(255),random(255),0.7) 0%, transparent 50%),
    linear-gradient(-45deg, rgba(random(255),random(255),random(255),0.7) 0%, transparent 50%),
    linear-gradient(90deg, rgba(random(255),random(255),random(255),0.7) 0%, transparent 50%);
}

不过这种方法生成的是带渐变的背景，而非单一纯色随机。

为什么直接用random()没效果？ #

CSS的random()函数属于动态计算值，只能在动态上下文中生效，比如动画关键帧、@property定义的可动画变量、或者calc()结合动态场景。直接写background-color: rgb(random(255), random(255), random(255));属于静态属性赋值，浏览器不会执行random()计算，所以没有效果。

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