Question

我有一个带有body { width: 100%; height: 100%; background:linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), url(../img/imahe-1.jpg); } HTML标记的背景图片，我的代码如下：

CSS

{{1}}

它正在工作，我需要相同的东西，但是当页面加载时，颜色应该随机改变（窗口加载功能）。在body标签中会有背景图像。颜色将是不透明度（叠加） .it正在使用CSS方法。但我需要随机改变颜色（叠加颜色）而不是图像。

谢谢你提前。

Answer 1

每次运行时都会创建一个随机渐变背景......

function getRandomColor() {
  var hex = Math.floor(Math.random() * 0xFFFFFF);
  return "#" + ("000000" + hex.toString(16)).substr(-6);
}

$(function() {
  var col1 = getRandomColor();
  var col2 = getRandomColor();
  $("body").css("background", "linear-gradient(" + col1 + "," + col2 + ")");
});

body {
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

您可以在此示例中忽略css。只需要使代码片段正常工作。

Answer 2

使用Serge K在评论中发布的链接，您可以执行以下操作：

function getRandomColor() {
  var hex = Math.floor(Math.random() * 0xFFFFFF);
  return "#" + ("000000" + hex.toString(16)).substr(-6);
}

document.getElementsByTagName("BODY")[0].style.background = getRandomColor();

如何在窗口加载事件上随机更改背景颜色直至背景图像？

2 个答案: