Bolehkah sesiapa memberitahu saya cara menjana warna rawak untuk latar belakang laman web menggunakan css? adakah mungkin?

Question

Sama seperti kita boleh menggunakan sumber imej unsplash untuk menggunakan imej rawak. Begitu juga, bolehkah kita mencapai warna latar belakang hanya menggunakan css? Jika ya, sesiapa boleh memberitahu bagaimana untuk melakukannya?

Saya menggunakan fungsi rawak untuk menjana warna rawak untuk latar belakang dalam gaya. Tetapi ia tidak memberikan sebarang output

Answer 1

Ini memerlukan sekurang-kurangnya beberapa JS untuk menjana warna secara rawak

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>