javascript - 在document.body.appendChild上覆盖div作为背景

我正尝试使用https://github.com/qrohlf/trianglify生成的图像作为背景图像，就像作者在其网站（http://qrohlf.com/trianglify/）上所做的那样。如何将div覆盖在document.body.appendChild上。

最佳答案

Trianglify库提供了一种.png()方法，可用于将动态生成的图像添加到页面。

第一种方法只是将document.body.style.backgroundImage设置为生成的Trianglify图像。在这两种情况下，创建Trianglify图像时，我们都将使用window.innerHeight和window.innerWidth来获取窗口的高度和宽度。

// Create the Trianglify image
var pattern = Trianglify({
  height: window.innerHeight,
  width: window.innerWidth,
  cell_size: 30});

document.body.style.backgroundSize = "cover";
document.body.style.backgroundImage =  "url(" + pattern.png() + ")";

html,
body {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
Here's our HTML body.

您也可以创建一个元素，并将Trianglify图像设置为背景，以将其覆盖在页面上。

// Create the Trianglify image
var pattern = Trianglify({
  height: window.innerHeight,
  width: window.innerWidth,
  cell_size: 30});


var overlay = document.createElement("div");
overlay.style.position = "absolute";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.height = "100%";
overlay.style.width = "100%";
overlay.style.opacity = "0.8";

overlay.style.backgroundSize = "cover";
overlay.style.backgroundImage =  "url(" + pattern.png() + ")";

document.body.appendChild(overlay);

html,
body {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
Here's our HTML body.

关于javascript - 在document.body.appendChild上覆盖div作为背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44749276/