jquery - 刷新时更改背景图像和颜色

Question

我正在尝试在刷新时更改背景图像和颜色。我可以随机化背景图像，但不能随机化颜色。

例如:
bg-1.jpg - 颜色 1
bg-2.jpg - 颜色 2
bg-3.jpg - 颜色 3

我知道我可以随机化图像，但我无法使用以下代码为每个图像获取匹配的颜色:

$(document).ready(function() {
  var bgArray = ['A-VOLTE.jpg', 'AL-DI-LA.jpg', 'CON-TE.jpg', 'DAVIDE-E-GOLIA.jpg', 'DELLE-VERITA.jpg', 'DI-NOI.jpg', 'DIVIDERE.jpg', 'FA-NIENTE.jpg', 'FORSE.jpg', 'GRAZIE.jpg', 'IL-CONTATTO.jpg', 'IL-PONTE.jpg', 'IMPERATIVO.jpg', 'INDELEBILE.jpg', '-VOLONTA.jpg', 'MERITAVI.jpg', 'MUOVERE.jpg', 'NEL-DUBBIO.jpg', 'NESSUNO.jpg', 'NON-LO-SAI.jpg', 'PER-DIMENTICARE.jpg', 'PRIMA-DI-ANDARE.jpg', 'PROFONDO.jpg', 'SARA-SUO.jpg', 'SEMPRE.jpg', 'TUTTO-DA-RIFARE.jpg', 'TUTTO-PER-TE.jpg', 'UN-RICORDO.jpg', 'UNTITLED-1.jpg', 'UNTITLED-2.jpg', 'VERO.jpg', 'VIENI-CON-ME.jpg'];
  var bg = bgArray[Math.floor(Math.random() * bgArray.length)];
  var path = 'artworks/abstract/';
  var imageUrl = path + bg;
  $('body').css('background-image', 'url(' + imageUrl +')');
});

Answer 1

您可以为每个背景添加一个包含匹配颜色代码的数组，然后将其作为样式添加到您的body。

$(document).ready(function() {
  var bgArray = ['...'];
  var colorsArray = ['...'];
  var rng = Math.floor(Math.random() * bgArray.length);
  var bg = bgArray[rng];
  var color = colorsArray[rng];

  var path = 'artworks/abstract/';
  var imageUrl = path + bg;
  $('body').css('background-image', 'url(' + imageUrl +')');
  $('body').css('background-color', color);
});

在这种情况下，您将获得匹配的 bg 和 color，前提是匹配的颜色具有相同的索引(在 colorsArray 中)作为背景(在 bgArray 中)。

这是一个 fiddle .