JavaScript 函数不适用于渐变

Question

抱歉问题标题模糊，

var background = [
  "background: linear-gradient(to left, #F0C27B, #4B1248)",
  "background: linear-gradient(to left, #5614B0, #DBD65C)",
  "background: linear-gradient(to left, #004FF9, #FFF94C)",
  "background: linear-gradient(to left, #FFA17F, #00223E)",
  "/css/1.png",
  "/css/2.png",
  "/css/3.png",
  "/css/4.png"
];

setInterval(function() {
  var chosenImage = Math.floor(Math.random() * (8));
  if chosenImage < 4 {
    document.body.style.backgroundColor = "url(" + background[chosenImage] + ")";
  } else {
    document.body.style.backgroundImage = "url(" + background[chosenImage] + ")";
  }
}, 10000);

基本上，这(使用 css 和 html 文件)随机播放网站上的背景图片，每 10 秒随机显示一张。之前我的代码没有渐变

var images = ["1.png", "2.png", ...] (up to 4)

和这样的setInterval

setInterval(function() {
  var chosenImage = Math.floor(Math.random() * (4));
  document.body.style.backgroundImage = "url(" + background[chosenImage] + ")";
}, 10000);

它工作正常，但是一旦我实现了您在开头的代码片段中看到的内容，图像就停止更改，而是显示我在 css 文件中指定的默认图像。

关于为什么它不随渐变变化有任何想法吗？谢谢!

Answer 1

您设置渐变的方式存在一些问题。

首先，您不想在样式中包含 background:，因为您已经直接分配给 backgroundImage 和 backgroundColor属性。

其次，您不想用 url( ) 包装渐变版本。 url( ) 从字面上看需要一个 URL，但你给它一个渐变。

最后，您不想使用 backgroundColor，因为渐变被视为图像，因此您可以将脚本简化为这样的东西。

var background = [
    "linear-gradient(to left, #F0C27B, #4B1248)",
    "linear-gradient(to left, #5614B0, #DBD65C)",
    "linear-gradient(to left, #004FF9, #FFF94C)",
    "linear-gradient(to left, #FFA17F, #00223E)",
    "url(/css/1.png)",
    "url(/css/2.png)",
    "url(/css/3.png)",
    "url(/css/4.png)"
];

setInterval( function() {
    var chosenImage = Math.floor( Math.random( ) * 8 );

    document.body.style.background = background[ chosenImage ];
}, 10000 );