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

Question

我正在尝试使用 https://github.com/qrohlf/trianglify 生成的图像作为作者在他的网站上所做的背景图片 ( http://qrohlf.com/trianglify/ )。如何在 document.body.appendChild 上叠加一个 div。

Answer 1

Trianglify 库提供了一个 .png() 方法，我们可以使用它来将动态生成的图像添加到页面。

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

// 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.