每次用户刷新时，如何将不同的渐变设置为背景？

Question

我正在开发一个基于 bootstrap 的网页，在我的 CSS 文件中我有以下代码：

body {
  height: 100%;
  background: #3a7bd5; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #3a7bd5 , #3a6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

它应用渐变作为我页面的背景，但是我还有另外两种渐变：

background: #114357; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #114357 , #F29492); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #114357 , #F29492); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

和

background: #eacda3; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #eacda3 , #d6ae7b); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #eacda3 , #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

现在我想在用户刷新页面时随机应用这 3 个渐变中的一个（例如，首先他看到第二个渐变，然后他刷新页面并看到第三个渐变，等等）。

如何实现这种效果？

Answer 1

页面加载后，使用JavaScript向<body>元素添加随机class，并为不同的classes分配不同的渐变。

document.body.classList.add('gradient' + [1, 2, 3][Math.floor(Math.random() * 3)])

body {
  height: 100%;
}
body.gradient1 {
  background: #3a7bd5; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #3a7bd5 , #3a6073); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #3a7bd5 , #3a6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
body.gradient2 {
  background: #114357; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #114357 , #F29492); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #114357 , #F29492); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
body.gradient3 {
  background: #eacda3; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #eacda3 , #d6ae7b); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #eacda3 , #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

每次用户刷新时，如何将不同的渐变设置为背景？

How can I set different gradients as background, each time user refreshes?

javascript

css

css-gradients