Quelqu'un peut-il me dire comment générer des couleurs aléatoires pour l'arrière-plan d'un site Web en utilisant CSS ? Est-il possible?

Question

Tout comme nous pouvons utiliser la source d'image Unsplash pour utiliser des images aléatoires. De même, pouvons-nous obtenir la couleur d’arrière-plan en utilisant uniquement du CSS ? Si oui, quelqu'un peut-il dire comment procéder ?

J'utilise une fonction aléatoire pour générer des couleurs aléatoires pour l'arrière-plan du style. Mais cela ne donne aucun résultat

Answer 1

Cela nécessitera au moins quelques JS pour générer des couleurs de manière aléatoire

const container = document.getElementById('element');

generateRandomColor();

function generateRandomColor() {
  // 16777215 is decimal equivalent of FFFFFF in hexadecimal
  const randomHex = Math.floor(Math.random() * 16777215).toString(16);
  container.style.backgroundColor = `#${randomHex}`;
  container.innerHTML = `#${randomHex}`;
}

.container {
  height: 100px;
  width: 100%;
  border: 1px solid black;
  margin-bottom: 5px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 24px;
}

<div id="element" class="container"></div>
<button onclick="generateRandomColor()">Generate Random Color</button>