谁能告诉我如何使用 css 为网站的背景生成随机颜色？这可能吗？

Question

就像我们可以使用 unsplash 图像源来使用随机图像一样。同样，我们可以只使用 css 来实现背景颜色吗？ 如果是的话谁能告诉怎么做？

我使用随机函数为样式中的背景生成随机颜色。但它没有给出任何输出

Answer 1

这至少需要一些 JS 来随机生成颜色

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>